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.

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

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

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

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

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

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

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

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

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

@ -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
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-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
View File

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