vuetify
Version:
Vue.js 2 Semantic Component Framework
103 lines (80 loc) • 1.99 kB
text/stylus
@import '../bootstrap'
@import '../theme'
v-overflow-btn($material)
.v-input__control,
.v-input__slot
&::before
background-color: $material.dividers // override v-text-field bottom border
&--segmented,
&--editable:hover,
&--editable.v-input--is-focused,
&--editable.v-select--is-menu-active
.v-input__append-inner
border-left: 1px solid $material.dividers
&:hover,
&.v-input--is-focused,
&.v-select--is-menu-active
.v-input__slot
background: $material.cards
theme(v-overflow-btn, "v-overflow-btn")
.v-overflow-btn
margin-top: 12px
&:not(.v-overflow-btn--editable) > .v-input__control > .v-input__slot
cursor: pointer
.v-select__slot
height: 48px
input
margin-left: 16px
.v-select__selection--comma:first-child
margin-left: 16px
.v-input__slot
transition: .3s $transition.swing
&::after
content: none
.v-label
margin-left: 16px
top: calc(50% - 10px)
.v-input__append-inner
width: 48px
height: 48px
align-self: auto
align-items: center
margin-top: 0
padding: 0
flex-shrink: 0
.v-input__append-outer,
.v-input__prepend-outer
margin-top: 12px
margin-bottom: 12px
.v-input__control::before
// TODO: move to mixin
height: 1px
top: -1px
content: ''
left: 0
position: absolute
transition: $primary-transition
width: 100%
&.v-input--is-focused,
&.v-select--is-menu-active
.v-input__slot
elevation(2)
.v-select__selections
width: 0px
&--segmented
.v-select__selections
flex-wrap: nowrap
.v-btn
border-radius: 0
margin: 0
margin-right: -16px // push past the input's padding
height: 48px
width: 100%
&__content
justify-content: start
&::before
background-color: transparent
&--editable
.v-input__append-inner,
.v-input__append-inner *
cursor: pointer