diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 3c65c52..d9aff25 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index a9e0f79..f61778a 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 97c1008..f8f872e 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss index f8b7f06..cd07cac 100644 --- a/src/scss/cdb-components/forms/checkbox.scss +++ b/src/scss/cdb-components/forms/checkbox.scss @@ -5,9 +5,18 @@ # Forms/Checkbox ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @@ -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; +} diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss index 9c4f75a..4c5b843 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/inputs.scss @@ -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; diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss index 2b918e4..d9c7317 100644 --- a/src/scss/cdb-components/forms/legends.scss +++ b/src/scss/cdb-components/forms/legends.scss @@ -5,26 +5,30 @@ # Forms/Labels ``` - - +
+ + + +
+
+ + + +



- +
+ + + +

@@ -35,21 +39,23 @@

RADIO

-

RADIO

+

RADIO

diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss index 2076860..0c04d3d 100644 --- a/src/scss/cdb-components/forms/radio.scss +++ b/src/scss/cdb-components/forms/radio.scss @@ -1,14 +1,23 @@ -// Radio Button styles + +// Radios styles // ---------------------------------------------- /* SG # Forms/Radio - ``` - - - +
+ + +
+
+ + +
+
+ + +
``` */ @@ -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; +} diff --git a/src/scss/cdb-components/forms/sliders.scss b/src/scss/cdb-components/forms/sliders.scss index b3e6804..9b76b2b 100644 --- a/src/scss/cdb-components/forms/sliders.scss +++ b/src/scss/cdb-components/forms/sliders.scss @@ -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; } diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss new file mode 100644 index 0000000..e6dd65b --- /dev/null +++ b/src/scss/cdb-components/forms/toggle.scss @@ -0,0 +1,59 @@ +// Radio Button styles +// ---------------------------------------------- + +/* SG +# Forms/Toggle + + +``` +
+ + + + +
+``` +*/ + +@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; + } + } +} diff --git a/src/scss/cdb-components/forms/toogle.scss b/src/scss/cdb-components/forms/toogle.scss deleted file mode 100644 index 9bd0078..0000000 --- a/src/scss/cdb-components/forms/toogle.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Radio Button styles -// ---------------------------------------------- - -/* SG -# Forms/Toogle - - -``` - -``` -*/ - -@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; -} diff --git a/src/scss/cdb-utilities/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 1019104..7684a09 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -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'); } diff --git a/src/scss/cdb-utilities/vendor/reset.scss b/src/scss/cdb-utilities/vendor/reset.scss index 0c9b86d..06fe9d1 100644 --- a/src/scss/cdb-utilities/vendor/reset.scss +++ b/src/scss/cdb-utilities/vendor/reset.scss @@ -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; }