aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-pt2021/assets/bulma-0.9.3/sass/form/select.sass
blob: 07fe98cca172fba24b782b957287945c57326fef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$select-colors: $form-colors !default

.select
  display: inline-block
  max-width: 100%
  position: relative
  vertical-align: top
  &:not(.is-multiple)
    height: $input-height
  &:not(.is-multiple):not(.is-loading)
    &::after
      @extend %arrow
      border-color: $input-arrow
      +ltr-position(1.125em)
      z-index: 4
  &.is-rounded
    select
      border-radius: $radius-rounded
      +ltr-property("padding", 1em, false)
  select
    @extend %input
    cursor: pointer
    display: block
    font-size: 1em
    max-width: 100%
    outline: none
    &::-ms-expand
      display: none
    &[disabled]:hover,
    fieldset[disabled] &:hover
      border-color: $input-disabled-border-color
    &:not([multiple])
      +ltr-property("padding", 2.5em)
    &[multiple]
      height: auto
      padding: 0
      option
        padding: 0.5em 1em
  // States
  &:not(.is-multiple):not(.is-loading):hover
    &::after
      border-color: $input-hover-color
  // Colors
  @each $name, $pair in $select-colors
    $color: nth($pair, 1)
    &.is-#{$name}
      &:not(:hover)::after
        border-color: $color
      select
        border-color: $color
        &:hover,
        &.is-hovered
          border-color: bulmaDarken($color, 5%)
        &:focus,
        &.is-focused,
        &:active,
        &.is-active
          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
  // Sizes
  &.is-small
    +control-small
  &.is-medium
    +control-medium
  &.is-large
    +control-large
  // Modifiers
  &.is-disabled
    &::after
      border-color: $input-disabled-color
  &.is-fullwidth
    width: 100%
    select
      width: 100%
  &.is-loading
    &::after
      @extend %loader
      margin-top: 0
      position: absolute
      +ltr-position(0.625em)
      top: 0.625em
      transform: none
    &.is-small:after
      font-size: $size-small
    &.is-medium:after
      font-size: $size-medium
    &.is-large:after
      font-size: $size-large