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

Merge pull request #37 from CartoDB/29-browsers_review

Browse Source 
Components optimization for all browsers
This commit is contained in:
María Checa 2016-02-04 15:02:20 +01:00
commit 0fc160c0e1
12 changed files with 308 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/fonts/cartoIcon.eot
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.ttf
View File

Binary file not shown.

BIN
src/fonts/cartoIcon.woff
View File

Binary file not shown.

60
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>

66
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;
} }

102
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,13 @@
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; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -49,7 +55,7 @@
content: ''; content: '';
} }
.CDB-Range::-webkit-slider-thumb::after { &::after {
position: absolute; position: absolute;
top: -6px; top: -6px;
right: -6px; right: -6px;
@ -60,22 +66,78 @@
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
content: ''; content: '';
z-index: 10; z-index: 1;
} }
.CDB-Range:focus { &:focus,
outline: none; &:hover {
} &::after {
.CDB-Range:hover::-webkit-slider-thumb::after,
.CDB-Range:focus::-webkit-slider-thumb::after {
cursor: pointer; cursor: pointer;
} }
.CDB-Range:disabled::-webkit-slider-thumb::before {
opacity: 0.2;
} }
.CDB-Range:disabled::-webkit-slider-thumb::after { &:disabled {
&::before,
&::after {
opacity: 0.2; 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;
bottom: 0;
left: -3000px;
height: $baseSize / 4;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
.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;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cBlue;
border-radius: 50%;
background: $cWhite;
content: '';
z-index: 1;
}

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;
}

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;