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

Merge pull request #177 from CartoDB/13074-hover-elements

Browse Source 
Add hover to UI Elements
This commit is contained in:
Carlos Matallín 2017-11-29 10:43:33 +01:00 committed by GitHub
commit d2d64a87cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 235 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/scss/cdb-components/_buttons.scss
View File

@ -160,10 +160,9 @@ Layout Component:
*/
.CDB-Button {
@include transition(background, 300ms);
position: relative;
padding: $baseSize $baseSize + 12;
border: 1px solid transparent;
transition: background, 300ms;
border-radius: $baseSize / 2;
cursor: pointer;
box-sizing: border-box;
@ -172,14 +171,14 @@ Layout Component:
.CDB-Button-Text {
display: block;
}
&.is-disabled {
cursor: default;
opacity: 0.24;
cursor: default;
}
}
.CDB-Button--loading {
.CDB-Button-loader {
position: absolute;
top: 50%;
@ -189,9 +188,11 @@ Layout Component:
opacity: 0;
z-index: 10;
}
.CDB-Button-Text {
@include transition(all 600ms);
transition: all 600ms;
}
&.is-loading {
cursor: default;
@ -200,6 +201,7 @@ Layout Component:
animation-duration: 600ms;
animation-fill-mode: forwards;
}
.CDB-Button-Text {
opacity: 0;
}
@ -235,26 +237,20 @@ Layout Component:
background: $cBlue;
color: $cWhite;
&:hover {
background: darken($cBlue, 8%);
}
&:hover,
&:active {
background: darken($cBlue, 16%);
background: $cBlueHover;
}
&.is-loading {
&:hover {
background: $cBlue;
}
&:hover,
&:active {
background: $cBlue;
}
}
&.is-disabled {
&:hover {
background: $cBlue;
}
&:hover,
&:active {
background: $cBlue;
}
@ -265,17 +261,13 @@ Layout Component:
background: $cAlert;
color: $cWhite;
&:hover {
background: darken($cAlert, 8%);
}
&:hover,
&:active {
background: darken($cAlert, 16%);
background: darken($cAlert, 8%);
}
&.is-disabled {
&:hover {
background: $cAlert;
}
&:hover,
&:active {
background: $cAlert;
}
@ -288,17 +280,13 @@ Layout Component:
background: $cError;
color: $cWhite;
&:hover {
background: darken($cError, 8%);
}
&:hover,
&:active {
background: darken($cError, 16%);
background: darken($cError, 8%);
}
&.is-disabled {
&:hover {
background: $cError;
}
&:hover,
&:active {
background: $cError;
}
@ -411,12 +399,14 @@ Layout Component:
.CDB-Button--secondary {
border: 1px solid $cBlue;
color: $cBlue;
box-shadow: inset 0 0 0 1px $cBlue;
&:hover {
background: rgba($cBlue, 0.08);
box-shadow: inset 0 0 0 2px $cBlueHover;
}
&:active {
background: $cBlue;
color: $cWhite;
@ -425,7 +415,9 @@ Layout Component:
&.is-disabled {
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px $cBlue;
}
&:active {
background: transparent;
}
@ -434,41 +426,40 @@ Layout Component:
&.is-loading {
cursor: default;
&:hover {
background: none;
color: $cBlue;
}
&:hover,
&:active {
background: none;
color: $cBlue;
}
}
&--background {
background-color: $cWhite;
}
}
.CDB-Button--secondary--background {
background-color: $cWhite;
}
.CDB-Button--white {
border: 1px solid $cWhite;
color: $cWhite;
box-shadow: inset 0 0 0 1px $cWhite;
&:hover {
background: rgba($cWhite, 0.08);
box-shadow: inset 0 0 0 2px darken($cWhite, 8%);
}
&:active {
background: rgba($cMainBg, 0.08);
color: $cWhite;
}
&.is-disabled {
@include opacity(0.24);
opacity: 0.24;
&:hover {
background: transparent;
box-shadow: inset 0 0 0 1px $cWhite;
}
&:active {
background: transparent;
color: $cWhite;
@ -478,14 +469,10 @@ Layout Component:
&.is-loading {
cursor: default;
&:hover {
background: none;
color: $cWhite;
}
&:hover,
&:active {
background: none;
color: $cWhite;
}
}
}

70
src/scss/cdb-components/_menu.scss
View File

@ -137,21 +137,32 @@
position: relative;
margin-bottom: 18px;
border-bottom: 1px solid $cMainLine;
&--no-margin {
margin-bottom: 0;
}
&--is-dropdown {
padding-top: $baseSize;
padding-right: 0;
padding-bottom: 0;
padding-left: $baseSize * 2;
}
}
.CDB-NavMenu-inner--no-margin {
margin-bottom: 0;
}
.CDB-NavMenu-inner--is-dropdown {
padding: $baseSize 0 0 $baseSize * 2;
}
.CDB-NavMenu-link {
display: block;
margin-bottom: -1px;
padding: 4px 0 11px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: $cBlue;
&:hover {
border-bottom: 2px solid $cBlueHover;
}
}
.CDB-NavMenu-item,
@ -162,7 +173,7 @@
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 1px solid $cBlack;
border-bottom: 2px solid $cMainText;
color: $cMainText;
}
@ -173,31 +184,38 @@
}
.CDB-NavSubmenu {
border-bottom: 1px solid $cSecondaryLine;
}
border-bottom: 2px solid $cSecondaryLine;
.CDB-NavSubmenu--inside {
position: absolute;
right: 0;
left: 0;
padding-top: 14px;
}
&--inside {
position: absolute;
right: 0;
left: 0;
padding-top: 14px;
}
.CDB-NavSubmenu--outside {
margin-top: -5px;
margin-bottom: 18px;
&--outside {
margin-top: -5px;
margin-bottom: 18px;
}
}
.CDB-NavSubmenu-link {
display: block;
margin-bottom: -1px;
padding-bottom: 12px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: $cBlue;
&:hover {
border-bottom: 2px solid $cBlueHover;
}
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 1px solid $cMainLine;
border-bottom: 2px solid $cMainLine;
color: $cMainText;
}
@ -206,7 +224,6 @@
}
.CDB-NavMenu.is-dark {
.CDB-NavMenu-inner,
.CDB-NavSubmenu {
border-bottom: 1px solid $cSecondaryText;
@ -214,16 +231,21 @@
.CDB-NavMenu-link,
.CDB-NavSubmenu-link {
margin-bottom: -1px;
color: $cAltText;
&:hover {
border-bottom: 2px solid darken($cMainLine, 8%);
}
}
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 1px solid $cMainLine;
border-bottom: 2px solid $cMainLine;
color: $cWhite;
}
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 1px solid $cMainLine;
border-bottom: 2px solid $cMainLine;
color: $cWhite;
}

8
src/scss/cdb-components/forms/_checkbox.scss
View File

@ -66,7 +66,7 @@
}
.CDB-Checkbox:checked + .CDB-Checkbox-face {
@include transition(background, 300ms);
transition: background 300ms;
border: 1px solid $cBlue;
background: $cBlue;
@ -78,6 +78,7 @@
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
border: 1px solid $cBlue;
&::before,
&::after {
background: $cWhite;
@ -85,7 +86,8 @@
}
.CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid $cHoverLine;
border: 1px solid $cBlueHover;
&::before,
&::after {
background: $cHoverLine;
@ -93,6 +95,7 @@
}
.CDB-Checkbox:active + .CDB-Checkbox-face {
border: 1px solid $cBlue;
&::before,
&::after {
background: $cBlue;
@ -102,6 +105,7 @@
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before,
&::after {
opacity: 0;

34
src/scss/cdb-components/forms/_dropdowns.scss
View File

@ -113,20 +113,23 @@
position: relative;
height: 250px;
}
.CDB-Dropdown {
@include display-flex();
@include flex-direction(row);
display: flex;
position: absolute;
top: 40px;
flex-direction: row;
max-height: 200px;
}
.CDB-Dropdown-calculations {
box-sizing: border-box;
padding: $sMargin-element;
border-right: 1px solid $cMainLine;
border-radius: 4px 0 0 4px;
background-color: $cSecondaryBackground;
box-sizing: border-box;
}
.CDB-Dropdown-calculationsElement {
margin-bottom: $sLineHeight-medium;
color: $cMainBg;
@ -136,12 +139,14 @@
margin-bottom: 0;
}
}
.CDB-Dropdown-options {
width: $baseSize * 20;
border-radius: 0 4px 4px 0;
background-color: $cWhite;
vertical-align: top;
}
.CDB-Dropdown-optionsElement {
@include text-overflow();
padding: 12px 10px;
@ -151,20 +156,23 @@
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: rgba(157, 224, 173, 0.2);
background-color: rgba($cBlue, 0.08);
color: $cMainBg;
cursor: pointer;
}
}
.CDB-Dropdown-optionsElement.is-selected {
color: $cMainBg;
}
.CDB-Dropdown-optionsElement.is-disabled {
color: $cHintText;
&:hover {
background-color: transparent;
cursor: default;
&.is-selected {
color: $cMainBg;
}
&.is-disabled {
color: $cHintText;
&:hover {
background-color: transparent;
cursor: default;
}
}
}

13
src/scss/cdb-components/forms/_inputs.scss
View File

@ -24,36 +24,45 @@
&.is-cursor {
cursor: pointer;
}
&.is-empty {
color: $cHintText;
}
&.is-number {
color: darken($cHighlight, 16%);
}
&.is-null {
color: $cHintText;
font-style: italic;
}
&:hover {
border: 1px solid $cHoverLine;
border: 1px solid $cBlueHover;
}
&:focus {
border: 1px solid $cBlue;
border: 1px solid $cBlackHover;
outline: none;
}
&:disabled,
&.is-disabled {
border-color: $cSecondaryLine;
background: $cThirdBackground;
cursor: default;
}
&.has-icon {
padding-right: $baseSize * 4;
}
&.has-error {
@include default-form-error-style();
}
}
.CDB-InputTextPlain {
width: 100%;
border: 0;

136
src/scss/cdb-components/forms/_option-input.scss
View File

@ -99,76 +99,114 @@
*/
.CDB-OptionInput {
width: 100%;
height: $baseSize * 4;
border: 1px solid $cMainLine;
border-radius: $baseSize / 2;
box-sizing: border-box;
width: 100%;
height: $baseSize * 4 - 2px;
border-radius: $baseSize / 2;
vertical-align: middle;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:focus {
border: 1px solid $cBlue;
}
}
.CDB-OptionInput.is-active {
border: 1px solid $cBlue;
}
.CDB-OptionInput-container {
@include display-flex();
@include align-content(center);
@include align-items(center);
margin: 0 $baseSize;
}
.CDB-OptionInput-container--noMargin {
margin: 0;
display: flex;
align-content: center;
align-items: center;
&--noMargin {
margin: 0;
}
}
.CDB-OptionInput-item {
@include display-flex();
@include align-items(center);
@include align-content(center);
width: auto;
display: flex;
position: relative;
box-sizing: content-box;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: $sFontSize-medium;
box-sizing: content-box;
&::after {
width: 1px;
height: 100%;
margin-right: $baseSize;
background-color: $cSecondaryLine;
content: '';
&.is-active,
&:hover,
&:focus {
cursor: pointer;
}
&:first-child {
width: auto;
margin-right: $baseSize;
}
&:last-child {
width: 100%;
}
}
&::after {
display: none;
.CDB-OptionInput-container--border .CDB-OptionInput-item {
padding: 0 $baseSize;
border: 1px solid $cMainLine;
&:hover {
border: 1px solid $cBlueHover;
}
&.is-active,
&:focus {
border: 1px solid $cBlackHover;
}
&:first-child {
margin-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
&:hover {
+ .CDB-OptionInput-item::after {
content: none;
}
}
}
&:last-child {
border-radius: 4px;
}
+ .CDB-OptionInput-item {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&.is-active::after,
&:focus::after,
&:hover::after {
position: absolute;
left: -1px;
width: 1px;
height: calc(100% + 2px);
content: '';
}
&:hover::after {
background-color: $cBlueHover;
}
&.is-active::after,
&:focus::after {
background-color: $cBlackHover;
}
}
}
.CDB-OptionInput-item--noSeparator::after {
content: '';
}
.CDB-OptionInput-content {
@include display-flex();
@include align-items(center);
height: 100%;
margin-left: -$baseSize;
padding: 0 $baseSize + 2;
color: $cMainBg;
display: flex;
box-sizing: content-box;
align-items: center;
justify-content: center;
height: 100%;
color: $cMainBg;
white-space: nowrap;
&:hover {
text-decoration: none;
}
}
.CDB-OptionInput-item:first-child .CDB-OptionInput-content {
border-bottom-left-radius: 4px;
}
.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
border-bottom: 1px solid $cMainBg;
}

5
src/scss/cdb-components/forms/_radio.scss
View File

@ -56,7 +56,7 @@
}
.CDB-Radio:checked + .CDB-Radio-face {
@include transition(background, 300ms);
transition: background 300ms;
border: 1px solid $cBlue;
background: $cBlue;
@ -79,7 +79,8 @@
}
.CDB-Radio:hover + .CDB-Radio-face {
border: 1px solid $cHoverLine;
border: 1px solid $cBlueHover;
&::before {
background: $cHoverLine;
}

13
src/scss/cdb-components/forms/_toggle.scss
View File

@ -35,12 +35,22 @@
opacity: 0;
z-index: 1;
&:hover {
+ .CDB-ToggleFace {
background: $cHintTextHover;
}
&:checked + .CDB-ToggleFace {
background: $cHighlightHover;
}
}
+ .CDB-ToggleFace {
@include transition(background, 300ms);
position: relative;
width: $baseSize * 4;
height: $baseSize * 2;
margin: 0 2px;
transition: background 300ms;
border-radius: 50px;
background: $cHintText;
@ -69,4 +79,5 @@
.Toggle .is-disabled {
opacity: 0.24;
pointer-events: none;
}

4
src/scss/cdb-utilities/_helpers.scss
View File

@ -51,6 +51,10 @@
.u-actionTextColor {
color: $cBlue;
&:hover {
color: $cBlueHover;
}
}
.u-mainTextColor {
color: $cMainText;

19
src/scss/cdb-variables/_colors.scss
View File

@ -1,30 +1,33 @@
// Colors variables
// ----------------------------------------------
// General
// -- General
$cBlue: #1785FB;
$cBlack: #000;
$cWhite: #FFF;
$cMainBg: #2E3C43;
//Structure
// -- Structure
$cSecondaryDark: #282C2F;
$cSecondaryBackground: #F2F6F9;
$cThirdBackground: #F9F9F9;
//Lines
// -- Lines
$cHoverLine: #AAA;
$cMainLine: #DDD;
$cSecondaryLine: rgba($cMainBg, 0.08);
//Typography
// -- Borders
$cBlackHover: #2E3C43;
$cBlueHover: #0F6CD2;
// -- Typography
$cMainText: #2E3C43;
$cSecondaryText: #636D72;
$cAltText: #979EA1;
$cHintText: #CBCED0;
$cHintTextHover: #9C9FA1;
//Others
// -- Others
$cHighlight: #9DE0AD;
$cHighlightHover: #82BB90;
$cAlert: #F19243;
$cPublic: #9BC63B;
$cLink: #FEB100;