Kanboard-Prod/assets/sass/_form.sass

165 lines
2.8 KiB
Sass

@import variables
@import mixins
fieldset
border: 1px solid #ccc
margin-top: 20px
legend
font-weight: 500
font-size: size('medium')
label
cursor: pointer
display: block
margin-top: 10px
font-weight: 400
input
&[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
color: color('light')
border: 1px solid #ccc
width: 300px
max-width: 95%
font-size: size('normal')
height: 25px
padding-bottom: 0
padding-left: 4px
font-family: sans-serif
+appearance
@include placeholder
color: color('lighter')
&[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
color: color('dark')
border-color: rgba(82, 168, 236, 0.8)
outline: 0
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
input[type="number"]
width: 70px
input[type="text"]:not(.input-addon-field)
&.form-numeric
width: 70px
&.form-datetime, &.form-date
width: 150px
&.form-input-large
width: 400px
&.form-input-small
width: 150px
textarea:focus
color: color('dark')
border-color: rgba(82, 168, 236, 0.8)
outline: 0
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
textarea
padding: 4px
border: 1px solid #ccc
width: 400px
max-width: 99%
height: 200px
font-family: sans-serif
font-size: size('normal')
@include placeholder
color: color('lighter')
select
font-size: 1.0em
max-width: 95%
&:focus
outline: 0
select[multiple]
width: 300px
.tag-autocomplete
width: 400px
span.select2-container
margin-top: 2px
.form-actions
padding-top: 20px
clear: both
.form-required
color: red
padding-left: 5px
font-weight: bold
@include xs-device
display: none
input.form-error, textarea.form-error
border: 2px solid #b94a48
input.form-error:focus, textarea.form-error:focus
box-shadow: none
border: 2px solid #b94a48
.form-errors
color: color('error')
list-style-type: none
ul.form-errors li
margin-left: 0
.form-help
font-size: size('small')
color: brown
margin-bottom: 15px
.form-inline
padding: 0
margin: 0
border: none
label
display: inline
padding-right: 3px
input, select
margin: 0 15px 0 0
.form-required
display: none
.form-actions
display: inline-block
.js-submit-buttons-rendered
display: inline-block
.form-inline-group
display: inline
.form-columns
+display-flex
+flex-direction(row)
+flex-wrap
+justify-content(flex-start)
.form-column
margin-right: 25px
flex-grow: 1
fieldset
margin-top: 0
.form-login
max-width: 350px
margin: 5% auto 0
@include xs-device
margin-left: 5px
li
margin-left: 25px
line-height: 25px
h2
margin-bottom: 30px
font-weight: bold
.reset-password
margin-top: 20px
margin-bottom: 20px
a
color: color('light')