engine/app/assets/stylesheets/locomotive/formtastic_changes.scss

183 lines
3.9 KiB
SCSS

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "helpers";
form.formtastic {
fieldset {
margin-bottom: 20px;
@include border-bottom-radius(8px);
@include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
background: #ebedf4;
legend {
display: block;
width: 100%;
padding: 5px 0px;
@include border-top-radius(8px);
@include background-image(linear-gradient(#ebedf4, #d7dbe7));
span {
padding-left: 20px;
font-size: 13px;
font-weight: bold;
@include single-text-shadow(#fff, 1px, 1px, 1px);
}
em {
display: inline-block;
width: 9px;
height: 6px;
position: relative;
top: 0px;
left: 10px;
background: transparent image-url("locomotive/form/folded-arrow-on.png") no-repeat 0 0px;
}
} // legend
&.foldable {
span {
cursor: pointer;
}
&.folded legend span em {
width: 6px;
height: 9px;
top: 0px;
background-image: image-url("locomotive/form/folded-arrow-off.png");
}
} // .foldable
ol {
margin-bottom: 0px;
padding: 0px;
border-top: 1px solid #ccced7;
> li.input {
margin: 0;
padding: 10px 20px 16px 20px;
background: transparent image-url("locomotive/form/input-sep.png") repeat-x 0 bottom;
&:last-child, &.last {
background: none;
margin-bottom: 0px;
}
label, .label {
float: left;
width: 160px;
padding: 0px 0 0 0px;
font-size: 13px;
text-align: left;
color: #585A69;
@include single-text-shadow(#fff, 1px, 1px, 1px);
}
p.inline-hints {
margin: 5px 0 0 160px;
a {
color: #1f82bc;
}
.code {
background-color: #c8cad0;
color: #5E5F64;
@include single-text-shadow(rgba(255, 255, 255, 0.8), 0px, 1px, 1px);
}
} // p.inline-hints
div.inline-errors {
margin: 2px 0 0 160px;
padding: 8px 0 0 0;
background: transparent image-url("locomotive/form/error-arrow.png") no-repeat 17px 0;
p {
display: inline-block;
width: auto;
margin: 0px;
padding: 3px 12px 4px 30px;
background: #cd0f19 image-url("locomotive//form/icons/error.png") no-repeat 10px 6px;
color: #fff !important;
@include single-text-shadow(#000, 0px, 1px, 1px);
}
} // div.inline-errors
&.string {
label {
padding-top: 2px;
}
input[type=text] {
@include default-input-style;
width: 700px;
}
&.highlighted {
label {
padding-top: 7px;
}
input[type=text] {
font-size: 20px;
}
}
&.em-inline-hints {
p.inline-hints {
color: #1F82BC !important;
}
}
} // li.string
&.code {
textarea {
@include default-input-style;
width: 868px;
height: 400px;
}
div.inline-errors, p.inline-hints {
margin-left: 0px;
}
.more {
text-align: right;
width: auto;
margin: 10px 0px 0 0;
line-height: 0.6em;
a {
@include hover-link;
color: #787A89;
&.picture {
padding-left: 23px;
background: transparent image-url("locomotive/icons/asset_add.png") no-repeat left 1px;
}
}
} // li.code
}
} // > li
} //ol
} // fieldset
}