form { } form fieldset { margin: 1rem 0; padding: 0; border: none; width: 100%; position: relative; } form fieldset label { position: absolute; -webkit-transform: translate3d(10px, 100%); -moz-transform: translate3d(10px, 100%); -ms-transform: translate3d(10px, 100%); -o-transform: translate3d(10px, 100%); transform: translate3d(10px, 100%); @include fontsize(14); @include fancy_sans; color: lighten($body_font_color, 25); line-height: 14px; top: .7rem; left: .75rem; z-index: 1; } input, .textarea-rounded { border: 1px solid #b3b3b3; border-radius: 4px; padding: 2.2rem 0 .75rem .75rem; width: 99%; @include fontsize(24); @include fancy_sans; } .file-upload-fieldset { border: 1px solid #b3b3b3; border-radius: 4px; padding: 6px 0 0 4px; label { position: relative; display: block; margin-bottom: 1rem; } .file-upload { position: relative; overflow: hidden; margin: 10px; } .file-upload input.upload { position: absolute; top: 0; right: 0; margin: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } } form .error input { border: 1px solid $link_color; } .helptext { @include fontsize(14); color: lighten($body_font_color, 25); } .errorlist { color: $link_color; list-style-type: none; padding: 0 0 0 1rem; position: relative; } table { width: 100%; border-collapse: collapse; tr { margin: 2rem 0; } td, th { display: table-cell; vertical-align: inherit; margin: 0; padding: 16px .25rem 14px; border-bottom: 1px solid #b3b3b3; } th { @include fontsize(13); @include smcaps; width: 200px; } td { width: 200px; } &:after { display: block; @extend %clearfix; } .btn { float: right;} } .btn { @include fontsize(15); display: inline-block; border-radius: 4px; -webkit-appearance: none; text-decoration: none; cursor: pointer; background: $link_color; color: #fff !important; border: 1px solid $link_color; padding: 7px 9px; white-space: nowrap; &:hover { background: $link_hover_color; border: 1px solid $link_hover_color; } } .btn-small { @include fontsize(10); @include smcaps; } .btn-more { padding: 5px 7px; border: none; outline: $link_color; background: $body_font_light !important; &:hover { border: none; //1px solid; } } .btn-subtle { padding: 3px 5px; border: none; //1px solid $body_font_light; color: $body_font_light !important; background: white; &:hover { background: white; border: none; //1px solid; color: $link_color !important; } } .btn-hollow { @include fontsize(17); padding: 6px 8px; border: none; //1px solid $body_font_light; color: $link_color !important; outline: $link_color !important; background: white; border: 1px solid $link_color; &:hover { background: white; color: $link_color !important; } } .btn-link { @include fontsize(15); padding: 0; border: none; //1px solid $body_font_light; color: lighten($body_font_color, 15) !important; background: white; border: none; &:hover { background: white; color: $body_font_color !important; } } .save { color: white !important; background: $link_color !important; &:hover { background: $link_color; color: white !important; } } .btn-accent { padding: 3px 5px; border: 1px solid $text_accent; background: $text_accent; color: white !important; outline: $text_accent; &:hover { background: $text_accent; border: 1px solid $text_accent; } } .btn-inline { display: inline; width: auto; } .note-save { float: right; } .form-narrow { margin: 0 auto; max-width: 60%; } .fancy-legend { @include fontsize(24); @include fancy-serif; } .highlight { border: 1px solid lighten($body_font_light, 20); border-radius: 4px; padding: 6px; } select { display: inline; @include fontsize(13); color: $body_font_color; border: 1px solid lighten($body_font_light, 15); padding: 5px; background: white; border-radius: 4px; } .note-detail #id_tags { @include fontsize(13); padding: 8px; } #fs-notebook{ label { top: -1.5rem; left: .25rem; } margin: 3rem 0 1.5rem; } .form-alert { border: 3px solid red; &:before { display: block; content: "This field is required"; padding: 6px; color: red; } }