agenda-libre-ruby/app/assets/stylesheets/form.sass

164 lines
3.7 KiB
Sass

@import font-awesome-sprockets
@import font-awesome
$border: none
$radius: 4px
$shadow: 0 0 2px darkgray
body.mce-content-body
margin: 0
border: none
padding: 1px 1%
font-size: inherit
min-height: 100%
.mce-menubar, .mce-panel
border: none !important
.helper p
color: gray
text-align: right
margin-top: 0
margin-bottom: 0
.field
color: #777
border: $border
display: flex
flex-wrap: wrap
box-shadow: $shadow
border-radius: $radius
& > label, .field_with_errors > label
width: 10em
margin: 0
padding: 0.5em
text-align: right
input, textarea, .radios, .mce-tinymce, div.tagsinput
flex-grow: 1
select
margin-left: 0
input, textarea, select, a.button, .actions > button, .radios, .mce-tinymce, div.tagsinput
border: none
outline: none
padding: 0.5em
font-size: inherit
font-family: inherit
background-color: transparent
&:focus
border: solid 0.4em #F0F8FF
padding: 0.1em 0.4em
background-color: transparent
border-left-width: 0.1em
border-right-width: 0.1em
&[type=radio]
box-shadow: none
&[type=radio] + label
border: none
&[type=submit], &.button
cursor: pointer
margin: 3px 0.4em
font-size: larger
box-shadow: $shadow
font-weight: bolder
letter-spacing: 2px
background-color: #9CC5EE
select
padding: 0.4em
.field_with_errors
display: inline
input, textarea, select, a.button
background-color: pink
.radios
text-align: left
[type=radio]
display: none
label
color: #258
cursor: pointer
padding: 0.5em
&:hover
color: #222
box-shadow: 0 0 0 4px lightgray
[type=radio]:checked + label
color: black
box-shadow: 0 0 0 6px lightgray
.actions
text-align: center
input
font-size: x-large
.field
&.required
& > label, .field_with_errors > label
&:after
color: darkred
content: '*'
font-size: smaller
& > label:before, th:before, th a:before
margin-right: 0.4em
+fa-icon()
&.login label:before
content: $fa-var-sign-in
&.password label:before
content: $fa-var-unlock
&.title label:before
content: $fa-var-newspaper-o
&.start_time label:before
content: $fa-var-toggle-on
&.end_time label:before
content: $fa-var-toggle-off
&.repeat label:before
content: $fa-var-repeat
&.rule > label:before
content: $fa-var-calculator
&.description label:before
content: $fa-var-pencil-square-o
&.place_name label:before
content: $fa-var-map-pin
&.address label:before
content: $fa-var-map-marker
&.city label:before, th.city a:before
content: $fa-var-building-o
&.department label:before, th.department a:before
content: $fa-var-puzzle-piece
&.region > label:before, th.region a:before
content: $fa-var-shield
&.locality > label:before
content: $fa-var-expand
&.contact label:before
content: $fa-var-envelope
&.submitter label:before
content: $fa-var-envelope-o
&.url label:before, th.url:before
content: $fa-var-external-link
&.diaspora label:before, th.diaspora:before
content: $fa-var-bullhorn
&.tags label:before, th.tags a:before
content: $fa-var-tags
&.active label:before
content: $fa-var-heartbeat
&.reason label:before
content: $fa-var-comment
&.kind > label:before, th.kind:before
content: $fa-var-cubes
&.feed label:before, th.feed:before
content: $fa-var-rss
&.future label:before
content: $fa-var-backward
&.period_year label:before
content: $fa-var-fast-backward
&.period_week label:before
content: $fa-var-step-backward
&.near_location label:before
content: $fa-var-dot-circle-o
&.near_distance label:before
content: $fa-var-arrows-h
&.iframe label:before
content: $fa-var-arrows-alt