mirror of
https://github.com/digital-asset/daml.git
synced 2024-09-21 01:37:15 +03:00
156 lines
3.6 KiB
Sass
156 lines
3.6 KiB
Sass
$font_size: 20pt !default
|
|
$font_size_small: 12px !default
|
|
|
|
$input_border_radius: 5px !default
|
|
$input_height: 42px !default
|
|
$input_height_small: 36px !default
|
|
$dropdown_padding: 18px !default
|
|
|
|
$gray_dark: #444444 !default
|
|
$gray: #999999 !default
|
|
$gray_light: #e8e8e8 !default
|
|
$gray_lighter: #f6f6f6 !default
|
|
$primary_light: $gray !default
|
|
$arrow_color: $gray !default
|
|
|
|
// Style the dropdown
|
|
.nice-select
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
|
background-color: transparent
|
|
border-radius: $input_border_radius
|
|
border: none
|
|
box-sizing: border-box
|
|
clear: both
|
|
cursor: pointer
|
|
display: block
|
|
float: left
|
|
font-family: inherit
|
|
height: $input_height
|
|
line-height: $input_height + 1
|
|
outline: none
|
|
padding-left: $dropdown_padding - 6
|
|
padding-right: $dropdown_padding + 12
|
|
position: relative
|
|
text-align: left !important
|
|
transition: all 0.2s ease-in-out
|
|
user-select: none
|
|
white-space: nowrap
|
|
width: auto
|
|
&:hover
|
|
border-color: darken($gray_light, 5%)
|
|
&:active, &:focus
|
|
border-color: $primary_light
|
|
// Arrow
|
|
&:after
|
|
background-image: url('../images/LightBluePixelatedArrow.svg')
|
|
content: ''
|
|
display: block
|
|
width: 35px
|
|
height: 23px
|
|
background-position-x: center
|
|
background-position-y: center
|
|
background-repeat: no-repeat
|
|
position: absolute
|
|
background-size: 25px
|
|
right: -8px
|
|
top: 12px
|
|
|
|
&.open
|
|
@extend :active
|
|
&:after
|
|
transform: rotate(-180deg)
|
|
.list
|
|
opacity: 1
|
|
pointer-events: auto
|
|
transform: scale(1) translateY(0)
|
|
&.disabled
|
|
border-color: lighten($gray_light, 2%)
|
|
color: $gray
|
|
pointer-events: none
|
|
&:after
|
|
border-color: lighten($arrow_color, 20%)
|
|
// Modifiers
|
|
&.wide
|
|
width: 100%
|
|
.list
|
|
left: 0 !important
|
|
right: 0 !important
|
|
&.right
|
|
float: right
|
|
.list
|
|
left: auto
|
|
right: 0
|
|
&.small
|
|
font-size: $font_size_small
|
|
height: $input_height_small
|
|
line-height: $input_height_small - 2
|
|
&:after
|
|
height: 4px
|
|
width: 4px
|
|
.option
|
|
line-height: $input_height_small - 2
|
|
min-height: $input_height_small - 2
|
|
// List and options
|
|
.list
|
|
width: 200px
|
|
font-size: 16pt
|
|
background-color: #fff
|
|
box-sizing: border-box
|
|
margin-top: 4px
|
|
opacity: 0
|
|
overflow: hidden
|
|
padding: 0
|
|
pointer-events: none
|
|
position: absolute
|
|
top: 100%
|
|
left: 15px
|
|
transform-origin: 50% 0
|
|
transform: scale(0.75) translateY(-$input_height / 2)
|
|
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out
|
|
z-index: 9
|
|
box-shadow: 3px 4px 6px 0 $table-shadow
|
|
-moz-box-shadow: 3px 4px 6px 0 $table-shadow
|
|
-webkit-box-shadow: 3px 4px 6px 0 $table-shadow
|
|
&:hover .option:not(:hover)
|
|
background-color: transparent !important
|
|
.option
|
|
font-size: 16px
|
|
cursor: pointer
|
|
font-weight: $weight-title
|
|
line-height: $input_height - 2
|
|
list-style: none
|
|
min-height: $input_height - 2
|
|
outline: none
|
|
padding-right: $dropdown_padding + 52px
|
|
text-align: left
|
|
color: $text-dark
|
|
padding-left: 40px
|
|
&:hover, &.focus, &.selected.focus
|
|
border-left: 5px solid $header-line
|
|
padding-left: 35px
|
|
color: $text-medium
|
|
&.disabled
|
|
background-color: transparent
|
|
color: $gray
|
|
cursor: default
|
|
&:active
|
|
color: $text-medium
|
|
|
|
// Use display instead of opacity for IE <= 10
|
|
.no-csspointerevents .nice-select
|
|
.list
|
|
display: none
|
|
&.open
|
|
.list
|
|
display: block
|
|
+media($mobile)
|
|
.nice-select
|
|
.list
|
|
width: 150px
|
|
.option
|
|
font-size: 14px
|
|
min-height: 30px
|
|
|
|
|
|
|