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

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

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

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

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

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

@ -113,20 +113,23 @@
position: relative; position: relative;
height: 250px; height: 250px;
} }
.CDB-Dropdown { .CDB-Dropdown {
@include display-flex(); display: flex;
@include flex-direction(row);
position: absolute; position: absolute;
top: 40px; top: 40px;
flex-direction: row;
max-height: 200px; max-height: 200px;
} }
.CDB-Dropdown-calculations { .CDB-Dropdown-calculations {
box-sizing: border-box;
padding: $sMargin-element; padding: $sMargin-element;
border-right: 1px solid $cMainLine; border-right: 1px solid $cMainLine;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
background-color: $cSecondaryBackground; background-color: $cSecondaryBackground;
box-sizing: border-box;
} }
.CDB-Dropdown-calculationsElement { .CDB-Dropdown-calculationsElement {
margin-bottom: $sLineHeight-medium; margin-bottom: $sLineHeight-medium;
color: $cMainBg; color: $cMainBg;
@ -136,12 +139,14 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
.CDB-Dropdown-options { .CDB-Dropdown-options {
width: $baseSize * 20; width: $baseSize * 20;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background-color: $cWhite; background-color: $cWhite;
vertical-align: top; vertical-align: top;
} }
.CDB-Dropdown-optionsElement { .CDB-Dropdown-optionsElement {
@include text-overflow(); @include text-overflow();
padding: 12px 10px; padding: 12px 10px;
@ -151,20 +156,23 @@
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&:hover { &:hover {
background-color: rgba(157, 224, 173, 0.2); background-color: rgba($cBlue, 0.08);
color: $cMainBg; color: $cMainBg;
cursor: pointer; cursor: pointer;
} }
}
.CDB-Dropdown-optionsElement.is-selected {
color: $cMainBg;
}
.CDB-Dropdown-optionsElement.is-disabled {
color: $cHintText;
&:hover { &.is-selected {
background-color: transparent; color: $cMainBg;
cursor: default; }
&.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 { &.is-cursor {
cursor: pointer; cursor: pointer;
} }
&.is-empty { &.is-empty {
color: $cHintText; color: $cHintText;
} }
&.is-number { &.is-number {
color: darken($cHighlight, 16%); color: darken($cHighlight, 16%);
} }
&.is-null { &.is-null {
color: $cHintText; color: $cHintText;
font-style: italic; font-style: italic;
} }
&:hover { &:hover {
border: 1px solid $cHoverLine; border: 1px solid $cBlueHover;
} }
&:focus { &:focus {
border: 1px solid $cBlue; border: 1px solid $cBlackHover;
outline: none; outline: none;
} }
&:disabled, &:disabled,
&.is-disabled { &.is-disabled {
border-color: $cSecondaryLine; border-color: $cSecondaryLine;
background: $cThirdBackground; background: $cThirdBackground;
cursor: default; cursor: default;
} }
&.has-icon { &.has-icon {
padding-right: $baseSize * 4; padding-right: $baseSize * 4;
} }
&.has-error { &.has-error {
@include default-form-error-style(); @include default-form-error-style();
} }
} }
.CDB-InputTextPlain { .CDB-InputTextPlain {
width: 100%; width: 100%;
border: 0; border: 0;

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

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

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

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

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

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

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

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