diff --git a/css/nice-select.css b/css/nice-select.css index d72a7cb..165df9c 100644 --- a/css/nice-select.css +++ b/css/nice-select.css @@ -86,6 +86,9 @@ .nice-select.small .option { line-height: 34px; min-height: 34px; } + .nice-select span.current { + display: block; + overflow: hidden; } .nice-select .list { background-color: #fff; border-radius: 5px; diff --git a/css/style.css b/css/style.css index 3dbe4bb..0571ba4 100644 --- a/css/style.css +++ b/css/style.css @@ -86,6 +86,9 @@ .nice-select.small .option { line-height: 34px; min-height: 34px; } + .nice-select span.current { + display: block; + overflow: hidden; } .nice-select .list { background-color: #fff; border-radius: 5px; diff --git a/scss/_nice-select-prefixed.scss b/scss/_nice-select-prefixed.scss index ca3c3e7..fba3ff6 100644 --- a/scss/_nice-select-prefixed.scss +++ b/scss/_nice-select-prefixed.scss @@ -19,7 +19,7 @@ $arrow_color: $gray !default; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #fff; border-radius: $input_border_radius; - border: solid 1px $gray_light; + border: solid 1px $gray_light; box-sizing: border-box; clear: both; cursor: pointer; @@ -51,19 +51,19 @@ $arrow_color: $gray !default; border-color: $primary_light; } // Arrow - &:after { + &:after { border-bottom: 2px solid $arrow_color; border-right: 2px solid $arrow_color; content: ''; - display: block; + display: block; height: 5px; margin-top: -4px; pointer-events: none; - position: absolute; - right: 12px; - top: 50%; - -webkit-transform-origin: 66% 66%; - -ms-transform-origin: 66% 66%; + position: absolute; + right: 12px; + top: 50%; + -webkit-transform-origin: 66% 66%; + -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); @@ -73,7 +73,7 @@ $arrow_color: $gray !default; transition: all 0.15s ease-in-out; width: 5px; } - + &.open { @extend :active; &:after { @@ -93,11 +93,11 @@ $arrow_color: $gray !default; border-color: lighten($gray_light, 2%); color: $gray; pointer-events: none; - &:after { + &:after { border-color: lighten($arrow_color, 20%); } } - + // Modifiers &.wide { width: 100%; @@ -117,7 +117,7 @@ $arrow_color: $gray !default; font-size: $font_size_small; height: $input_height_small; line-height: $input_height_small - 2; - &:after { + &:after { height: 4px; width: 4px; } @@ -126,7 +126,12 @@ $arrow_color: $gray !default; min-height: $input_height_small - 2; } } - + + span.current { + display: block; + overflow: hidden; + } + // List and options .list { background-color: #fff; @@ -167,10 +172,10 @@ $arrow_color: $gray !default; -webkit-transition : all 0.2s; transition: all 0.2s; - &:hover, &.focus, &.selected.focus { + &:hover, &.focus, &.selected.focus { background-color: $gray_lighter; } - &.selected { + &.selected { font-weight: bold; } &.disabled { @@ -191,4 +196,4 @@ $arrow_color: $gray !default; display: block; } } -} \ No newline at end of file +} diff --git a/scss/nice-select.scss b/scss/nice-select.scss index e25bed8..a185475 100644 --- a/scss/nice-select.scss +++ b/scss/nice-select.scss @@ -19,7 +19,7 @@ $arrow_color: $gray !default; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #fff; border-radius: $input_border_radius; - border: solid 1px $gray_light; + border: solid 1px $gray_light; box-sizing: border-box; clear: both; cursor: pointer; @@ -46,23 +46,23 @@ $arrow_color: $gray !default; border-color: $primary_light; } // Arrow - &:after { + &:after { border-bottom: 2px solid $arrow_color; border-right: 2px solid $arrow_color; content: ''; - display: block; + display: block; height: 5px; margin-top: -4px; pointer-events: none; - position: absolute; - right: 12px; - top: 50%; + position: absolute; + right: 12px; + top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); transition: all 0.15s ease-in-out; width: 5px; } - + &.open { @extend :active; &:after { @@ -78,11 +78,11 @@ $arrow_color: $gray !default; border-color: lighten($gray_light, 2%); color: $gray; pointer-events: none; - &:after { + &:after { border-color: lighten($arrow_color, 20%); } } - + // Modifiers &.wide { width: 100%; @@ -102,7 +102,7 @@ $arrow_color: $gray !default; font-size: $font_size_small; height: $input_height_small; line-height: $input_height_small - 2; - &:after { + &:after { height: 4px; width: 4px; } @@ -111,7 +111,12 @@ $arrow_color: $gray !default; min-height: $input_height_small - 2; } } - + + span.current { + display: block; + overflow: hidden; + } + // List and options .list { background-color: #fff; @@ -144,10 +149,10 @@ $arrow_color: $gray !default; padding-right: $dropdown_padding + 11; text-align: left; transition: all 0.2s; - &:hover, &.focus, &.selected.focus { + &:hover, &.focus, &.selected.focus { background-color: $gray_lighter; } - &.selected { + &.selected { font-weight: bold; } &.disabled { @@ -168,4 +173,4 @@ $arrow_color: $gray !default; display: block; } } -} \ No newline at end of file +}