silverstripe-framework/admin/scss/_forms.scss

203 lines
4.6 KiB
SCSS
Raw Normal View History

2011-04-15 01:27:23 +02:00
/**
* This file defines common styles for form elements used throughout the CMS interface.
* It is an addition to the base styles defined in sapphire/css/Form.css.
*/
/** ----------------------------------------------------
* Basic form fields
* ---------------------------------------------------- */
.field {
display: block;
padding: 10px 0;
border-bottom: 1px solid $color-shadow-light;
overflow: hidden;
label.left {
float: left;
width: 170px;
padding: 8px 20px 8px 4px;
line-height: $font-base-lineheight;
}
// Don't float inner/contained fields
.middleColumn {
margin-left: 15em;
.field {
display: inline;
padding: 0;
border: none;
}
label {
float: none;
width: auto;
}
}
}
// TODO Change to mixin?
form.nostyle {
.field {
display: inline;
padding: 0;
border: 0;
}
label {
float: none;
width: auto;
2011-04-15 01:27:23 +02:00
}
.middleColumn {
margin-left: 0;
2011-04-15 01:27:23 +02:00
}
}
.field.nolabel {
.middleColumn {
margin-left: 0;
}
}
.field.text input, textarea {
@include border-radius(4px);
background: #fff;
@include linear-gradient(color-stops(
#efefef,
#fff 10%,
#fff 90%,
#efefef
));
border: 1px solid lighten($color-medium-separator, 20%);
padding: 7px;
}
/** ----------------------------------------------------
* Buttons
* ---------------------------------------------------- */
.cms {
input.loading,
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
.ui-widget-header input.ui-state-default.loading {
padding-left: 16px;
background: $color-widget-bg url(../../images/network-save.gif) no-repeat center left;
}
.ss-ui-button.ss-ui-action-constructive,
.ui-widget-content .ss-ui-button.ss-ui-action-constructive,
.ui-widget-header .ss-ui-button.ss-ui-action-constructive {
padding-left: 23px;
color: $color-text-light;
border-color: $color-button-constructive-border;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 6px,
linear-gradient(color-stops(
$color-button-constructive-light,
$color-button-constructive-dark
))
);
background-color: $color-button-constructive-light;
@include text-shadow(darken($color-base, 40%) 1px 1px 0);
@include box-shadow(darken($color-base, 20%) 1px 1px 2px);
}
.ss-ui-button.ss-ui-action-constructive.ui-state-hover {
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 6px,
linear-gradient(color-stops(
darken($color-button-constructive-light, 2%),
darken($color-button-constructive-dark, 3%)
))
);
background-color: $color-button-constructive-dark;
@include box-shadow(darken($color-base, 10%) 1px 1px 1px);
}
.ss-ui-button.ss-ui-action-constructive.cms-page-add-button {
background-position: 5px -155px;
}
.ss-ui-button.ss-ui-action-destructive,
.ui-widget-content .ss-ui-button.ss-ui-action-destructive,
.ui-widget-header .ss-ui-button.ss-ui-action-destructive {
color: $color-button-destructive;
background-color: $color-button-generic-light;
}
.ss-ui-button.ss-ui-action-destructive.delete {
padding-left: 23px;
color: $color-button-destructive;
border-color: $color-button-generic-border;
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px -26px,
linear-gradient(color-stops(
$color-button-generic-light,
$color-button-generic-dark
))
);
@include text-shadow(none);
@include box-shadow(darken($color-base, 2%) 1px 1px 2px);
}
.ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover {
@include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px -26px,
linear-gradient(color-stops(
darken($color-button-generic-light, 2%),
darken($color-button-generic-dark, 3%)
))
);
background-color: $color-button-generic-dark;
@include box-shadow(darken($color-base, 10%) 1px 1px 1px);
}
.ss-ui-button.ss-ui-action-minor,
.ui-widget-content .ss-ui-button.ss-ui-action-minor
.ui-widget-header .ss-ui-button.ss-ui-action-minor {
background: none;
padding: 0;
border: 0;
color: $color-text-dark;
text-decoration: underline;
}
}
.cms-edit-form {
padding-bottom: 20px;
.text input, textarea {
width: 300px;
font-family: $font-family;
font-size: $font-base-size;
}
.Actions {
text-align: right;
}
}
2011-04-15 01:27:23 +02:00
/** ----------------------------------------------------
* Specific field overrides
* ---------------------------------------------------- */
.htmleditor {
label {
display: block;
float: none;
padding-bottom: 10px;
}
.middleColumn {
margin-left: 0px;
clear: left;
}
}
.field#ViewerGroups, .field#EditorGroups, .field#CreateTopLevelGroups {
label {
display: none;
}
}
.action-hidden {
display: none;
2011-04-15 01:27:23 +02:00
}