Skip to content

Commit

Permalink
Fixing css states to be scoped with Select selector, closes #1951.
Browse files Browse the repository at this point in the history 
Ran this locally and compared each of the demos against the live version
and saw no differences.
  • Loading branch information
@agirton
agirton committed Sep 13, 2017
1 parent 9af79b7 commit b5a17bb
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 132 deletions.
134 changes: 70 additions & 64 deletions less/control.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,78 @@
}

// handle disabled state
&.is-disabled > .Select-control {
background-color: @select-input-bg-disabled;
&:hover {
box-shadow: none;
&.is-disabled {
.Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;
}

> .Select-control {
background-color: @select-input-bg-disabled;
&:hover {
box-shadow: none;
}
}
}
&.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;
opacity: 0.35;

&.is-open > .Select-control {
.border-bottom-radius( 0 );
background: @select-input-bg;
border-color: darken(@select-input-border-color, 10%) @select-input-border-color lighten(@select-input-border-color, 5%);

// flip the arrow so its pointing up when the menu is open
.Select-arrow {
top: -2px;
border-color: transparent transparent @select-arrow-color;
border-width: 0 @select-arrow-width @select-arrow-width;
}
}

&.is-searchable {
&.is-open > .Select-control {
cursor: text;
}

&.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
}

&.is-focused:not(.is-open) > .Select-control {
.Select-focus-state(@select-input-border-focus);
}

&.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: (@select-clear-width + @select-arrow-width * 5);
}

&.has-value.Select--single > .Select-control .Select-value,
&.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
.Select-value-label {
color: @select-text-color;
}
a.Select-value-label {
cursor: pointer;
text-decoration: none;

&:hover,
&:focus {
color: @select-link-hover-color;
outline: none;
text-decoration: underline;
}
}
}

// fake-hide the input when the control is pseudo-focused
&.has-value.is-pseudo-focused .Select-input {
opacity: 0;
}

&.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: @select-arrow-color-hover;
}
}

Expand Down Expand Up @@ -69,35 +131,6 @@
}
}

.is-searchable {
&.is-open > .Select-control {
cursor: text;
}
}

.is-open > .Select-control {
.border-bottom-radius( 0 );
background: @select-input-bg;
border-color: darken(@select-input-border-color, 10%) @select-input-border-color lighten(@select-input-border-color, 5%);

// flip the arrow so its pointing up when the menu is open
.Select-arrow {
top: -2px;
border-color: transparent transparent @select-arrow-color;
border-width: 0 @select-arrow-width @select-arrow-width;
}
}

.is-searchable {
&.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
}

.is-focused:not(.is-open) > .Select-control {
.Select-focus-state(@select-input-border-focus);
}

// placeholder
.Select-placeholder,
.Select--single > .Select-control .Select-value {
Expand All @@ -118,29 +151,6 @@
white-space: nowrap;
}

.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: (@select-clear-width + @select-arrow-width * 5);
}

.has-value.Select--single > .Select-control .Select-value,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
.Select-value-label {
color: @select-text-color;
}
a.Select-value-label {
cursor: pointer;
text-decoration: none;

&:hover,
&:focus {
color: @select-link-hover-color;
outline: none;
text-decoration: underline;
}
}
}


// the <input> element users type in

.Select-input {
Expand Down Expand Up @@ -246,10 +256,6 @@
width: 0;
position: relative;
}
.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: @select-arrow-color-hover;
}

.Select--multi .Select-multi-value-wrapper {
display: inline-block;
Expand Down
139 changes: 71 additions & 68 deletions scss/control.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,79 @@
}

// handle disabled state
&.is-disabled > .Select-control {
background-color: $select-input-bg-disabled;
&:hover {
box-shadow: none;
&.is-disabled {
.Select-arrow-zone {
cursor: default;
pointer-events: none;
}

> .Select-control {
background-color: $select-input-bg-disabled;
&:hover {
box-shadow: none;
}
}
}
&.is-disabled .Select-arrow-zone {
cursor: default;
pointer-events: none;

&.is-searchable {
&.is-open > .Select-control {
cursor: text;
}

&.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
}

&.is-open > .Select-control {
@include border-bottom-radius( 0 );
background: $select-input-bg;
border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%);

// flip the arrow so its pointing up when the menu is open
.Select-arrow {
top: -2px;
border-color: transparent transparent $select-arrow-color;
border-width: 0 $select-arrow-width $select-arrow-width;
}
}

&.is-focused:not(.is-open) > .Select-control {
border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
box-shadow: $select-input-box-shadow-focus;
}


&.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: ($select-clear-width + $select-arrow-width * 5);
}

&.has-value.Select--single > .Select-control .Select-value,
&.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
.Select-value-label {
color: $select-text-color;
}
a.Select-value-label {
cursor: pointer;
text-decoration: none;

&:hover,
&:focus {
color: $select-link-hover-color;
outline: none;
text-decoration: underline;
}
}
}

// fake-hide the input when the control is pseudo-focused
&.has-value.is-pseudo-focused .Select-input {
opacity: 0;
}

&.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: $select-arrow-color-hover;
}
}

Expand Down Expand Up @@ -56,36 +120,6 @@
}
}

.is-searchable {
&.is-open > .Select-control {
cursor: text;
}
}

.is-open > .Select-control {
@include border-bottom-radius( 0 );
background: $select-input-bg;
border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%);

// flip the arrow so its pointing up when the menu is open
.Select-arrow {
top: -2px;
border-color: transparent transparent $select-arrow-color;
border-width: 0 $select-arrow-width $select-arrow-width;
}
}

.is-searchable {
&.is-focused:not(.is-open) > .Select-control {
cursor: text;
}
}

.is-focused:not(.is-open) > .Select-control {
border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
box-shadow: $select-input-box-shadow-focus;
}

// placeholder
.Select-placeholder,
.Select--single > .Select-control .Select-value {
Expand All @@ -106,28 +140,6 @@
white-space: nowrap;
}

.has-value.is-clearable.Select--single > .Select-control .Select-value {
padding-right: ($select-clear-width + $select-arrow-width * 5);
}

.has-value.Select--single > .Select-control .Select-value,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
.Select-value-label {
color: $select-text-color;
}
a.Select-value-label {
cursor: pointer;
text-decoration: none;

&:hover,
&:focus {
color: $select-link-hover-color;
outline: none;
text-decoration: underline;
}
}
}


// the <input> element users type in

Expand Down Expand Up @@ -161,11 +173,6 @@

}

// fake-hide the input when the control is pseudo-focused
.has-value.is-pseudo-focused .Select-input {
opacity: 0;
}

// fake input
.Select-control:not(.is-searchable) > .Select-input {
outline: none;
Expand Down Expand Up @@ -246,10 +253,6 @@
width: 0;
position: relative;
}
.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
border-top-color: $select-arrow-color-hover;
}



Expand Down

0 comments on commit b5a17bb

Please sign in to comment.