You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.6 KiB
Stylus
80 lines
1.6 KiB
Stylus
@import './var.inc.styl'
|
|
|
|
// Normal Textbox
|
|
input.textbox, textarea.textbox
|
|
form-styles()
|
|
background-color: $input-background-color
|
|
outline: $input-outline
|
|
transition: outline-color .2s, border-color .2s
|
|
transition-timing-function: ease-out-cubic
|
|
|
|
&:focus
|
|
border-color: $input-focus-border-color
|
|
outline: $input-focus-outline
|
|
outline-offset: 0
|
|
|
|
// Overwrite, for IE compatibility
|
|
&:read-only
|
|
outline: 0
|
|
|
|
&:disabled
|
|
opacity: 0.5
|
|
|
|
textarea.textbox
|
|
height: rem(200px)
|
|
|
|
div.textbox
|
|
min-height: rem(200px)
|
|
margin-bottom: 1rem
|
|
|
|
.data-table
|
|
input.textbox, textarea.textbox
|
|
margin-bottom: 0
|
|
|
|
div.autocomplete-container
|
|
margin-bottom: 0 !important
|
|
|
|
// Material Textbox
|
|
label.textbox.material
|
|
input
|
|
form-styles()
|
|
border: 0
|
|
background: none
|
|
outline: 0
|
|
padding-left: 0
|
|
padding-right: 0
|
|
color: $text-1-color
|
|
border-bottom: 2px solid rgba($text-1-color, 0.4)
|
|
transition: border-color .2s ease-out-cubic
|
|
|
|
&:disabled, &:read-only
|
|
color: rgba($text-1-color, 0.6)
|
|
|
|
&:enabled:read-write:hover
|
|
border-color: rgba($text-1-color, 0.8)
|
|
|
|
&:enabled:read-write:focus
|
|
border-color: $input-focus-border-color
|
|
|
|
&.focus
|
|
color: $input-focus-border-color
|
|
|
|
label.textbox.material.inverse
|
|
color: $immersive-text-color
|
|
|
|
input
|
|
color: $immersive-text-color
|
|
border-color: rgba($immersive-text-color, 0.4)
|
|
|
|
&:disabled, &:read-only
|
|
color: rgba($immersive-text-color, 0.6)
|
|
|
|
&:enabled:read-write:hover
|
|
border-color: $immersive-text-color
|
|
|
|
&:enabled:read-write:focus
|
|
border-color: $immersive-primary-color
|
|
|
|
&.focus
|
|
color: $immersive-primary-color
|