Add select

This commit is contained in:
Jeremy Thomas
2017-07-17 19:17:57 +01:00
parent cbff2d4f60
commit fcca456bac
6 changed files with 526 additions and 40 deletions

View File

@@ -97,16 +97,17 @@ $input-radius: $radius !default
.select
display: inline-block
height: 2.25em
max-width: 100%
position: relative
vertical-align: top
&:after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
&:not(.is-multiple)
height: 2.25em
&::after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
select
+input
cursor: pointer
@@ -114,16 +115,27 @@ $input-radius: $radius !default
font-size: 1em
max-width: 100%
outline: none
padding-right: 2.5em
&:hover
border-color: $input-hover-border
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border
&::-ms-expand
display: none
&[disabled]:hover
border-color: $input-disabled-border
&:not([multiple])
padding-right: 2.5em
&[multiple]
height: unset
padding: 0
option
padding: 0.5em 1em
// States
&:hover
&:after
&::after
border-color: $input-hover
// Colors
@each $name, $pair in $colors
@@ -139,14 +151,14 @@ $input-radius: $radius !default
+control-large
// Modifiers
&.is-disabled
&:after
&::after
border-color: $input-disabled
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&:after
&::after
+loader
margin-top: 0
position: absolute
@@ -332,7 +344,7 @@ $input-radius: $radius !default
&.has-icons-left,
&.has-icons-right
.input,
.select select
.select
&:focus
& ~ .icon
color: $input-icon-active
@@ -363,7 +375,7 @@ $input-radius: $radius !default
.icon.is-right
right: 0
&.is-loading
&:after
&::after
+loader
position: absolute !important
right: 0.625em