mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-31 23:07:47 +02:00
e4db3c6c05
Causes field to change width after first display, as the .hasDatepicker class is added dynamically on first field focus. Since we don't add an icon by default, there's no difference between an <input> field with date picker, an input field for dates, and a simple input field. Fall back to global (or CMS specific) rules.
583 lines
12 KiB
SCSS
583 lines
12 KiB
SCSS
/**
|
|
* This file defines common styles for form elements used throughout the CMS interface.
|
|
* It is an addition to the base styles defined in framework/css/Form.css.
|
|
*
|
|
* @package framework
|
|
* @subpackage admin
|
|
*/
|
|
|
|
/** ----------------------------------------------------
|
|
* Basic form fields
|
|
* ---------------------------------------------------- */
|
|
|
|
form.nostyle {
|
|
@include clear-form-field-styles();
|
|
}
|
|
|
|
.field {
|
|
display: block;
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
@include box-shadow(0 1px 0 lighten($color-shadow-light, 16%));
|
|
|
|
//TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/
|
|
//overflow: hidden;
|
|
|
|
|
|
// bottom padding accounts for the border and we have a negative
|
|
// margin with a postive padding to ensure the bottom border extends
|
|
// over the edges
|
|
padding: 0 0 $grid-y - 1 0;
|
|
margin: 0 0 $grid-y 0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
// using the legacy version as some of the more complex form fields
|
|
// need to use relative positioning and overflow hidden will not expand
|
|
// the containing boxes
|
|
@include legacy-pie-clearfix();
|
|
|
|
&.nolabel {
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
}
|
|
.help {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
label {
|
|
|
|
&.left {
|
|
float: left;
|
|
display: block;
|
|
width: $grid-x * 22;
|
|
padding: $grid-y $grid-x $grid-y 0;
|
|
line-height: $grid-y * 2;
|
|
font-weight: bold;
|
|
@include text-shadow(1px 1px 0 $color-text-shadow);
|
|
}
|
|
|
|
&.right {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: $grid-x * 23;
|
|
}
|
|
|
|
span.readonly {
|
|
padding-top: $grid-y;
|
|
line-height: $grid-y * 2;
|
|
display: block;
|
|
}
|
|
|
|
// Additional help text to clarify the field intent,
|
|
// displayed alongside the field (rather than in a tooltip)
|
|
.help {
|
|
clear: both;
|
|
color: lighten($color-text, 20%);
|
|
display: block;
|
|
font-style: italic;
|
|
margin: $grid-y/2 0 0 $grid-x*23;
|
|
}
|
|
|
|
input.text,
|
|
textarea,
|
|
select,
|
|
.TreeDropdownField {
|
|
width: 100%;
|
|
max-width: $grid-x * 64;
|
|
@include box-sizing(border-box);
|
|
|
|
.help {
|
|
max-width: $grid-x * 64;
|
|
}
|
|
}
|
|
|
|
input.text,
|
|
textarea,
|
|
.TreeDropdownField {
|
|
background: #fff;
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
padding: ($grid-y - 1) ($grid-x - 1);
|
|
line-height: $grid-y * 2;
|
|
margin: 0;
|
|
outline: none;
|
|
@include transition(0.2s box-shadow ease-in);
|
|
@include transition(0.2s border ease-in);
|
|
@include border-radius(4px);
|
|
@include background-image(linear-gradient(#EAEAEA, #fff 10%));
|
|
|
|
&:focus {
|
|
border: 1px solid lighten($color-medium-separator, 10%);
|
|
border-top-color: $color-medium-separator;
|
|
@include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset);
|
|
}
|
|
}
|
|
|
|
input[disabled], input.disabled,
|
|
textarea[disabled], textarea.disabled,
|
|
select[disabled], select.disabled {
|
|
color: lighten($color-text, 20%);
|
|
background: #efefef;
|
|
@include background-image(linear-gradient(darken(#efefef, 20%), #efefef 10%, #fff 90%, darken(#efefef, 20%)));
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
}
|
|
&#Action {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
form.stacked .field, .field.stacked {
|
|
label {
|
|
display: block;
|
|
float: none;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0px;
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
form.small .field, .field.small {
|
|
label {
|
|
&.left {
|
|
width: $grid-x * 14;
|
|
}
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: $grid-x * 15;
|
|
}
|
|
|
|
input.text,
|
|
textarea,
|
|
select,
|
|
.TreeDropdownField {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
/* TreeDropdowns */
|
|
.TreeDropdownField {
|
|
padding: 0;
|
|
|
|
.treedropdownfield-panel {
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
border-top: none;
|
|
|
|
@include border-bottom-left-radius(4px);
|
|
@include border-bottom-right-radius(4px);
|
|
}
|
|
|
|
&.treedropdownfield-open-tree {
|
|
@include border-bottom-left-radius(0);
|
|
@include border-bottom-right-radius(0);
|
|
}
|
|
|
|
// Hide badges, as they cost too much horizontal space,
|
|
// and mess up rendering for selected node title
|
|
.badge {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* dropdowns */
|
|
.dropdown {
|
|
select {
|
|
margin-top: $grid-y;
|
|
}
|
|
}
|
|
|
|
/* chzn override */
|
|
.chzn-container {
|
|
.chzn-results {
|
|
|
|
li {
|
|
font-size: 11px;
|
|
line-height: $grid-y * 2;
|
|
padding: $grid-y / 2 $grid-x / 2;
|
|
}
|
|
}
|
|
}
|
|
.chzn-container-active {
|
|
.chzn-single {
|
|
border: 1px solid lighten($color-medium-separator, 10%);
|
|
}
|
|
}
|
|
|
|
.chzn-container-single .chzn-single {
|
|
height: 26px;
|
|
line-height: 26px; /* not relative, as then we'd had to redo most of chzn */
|
|
font-size: $font-base-size;
|
|
|
|
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
|
|
|
|
|
&:hover, &:focus, &:active {
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
|
|
div {
|
|
width: 24px;
|
|
|
|
b {
|
|
background-position: 4px 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Date Fields */
|
|
input.month, input.day, input.year {
|
|
width: ($grid-x * 7);
|
|
}
|
|
|
|
input.time {
|
|
width: ($grid-x * 8); // smaller time field, since input is restricted
|
|
}
|
|
|
|
/* Hides borders in settings/access. Activated from JS */
|
|
&.remove-splitter {
|
|
border-bottom: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* Buttons
|
|
* ---------------------------------------------------- */
|
|
|
|
.cms {
|
|
|
|
.Actions, .cms-actions-row {
|
|
> * {
|
|
display: block;
|
|
float: left;
|
|
margin-right: $grid-x;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
min-height: 30px;
|
|
overflow: auto;
|
|
}
|
|
|
|
input.loading, button.loading,
|
|
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
|
|
.ui-widget-header input.ui-state-default.loading {
|
|
.ui-icon {
|
|
background: transparent url(../../images/network-save.gif) no-repeat 0 0;
|
|
}
|
|
|
|
color: lighten($color-text-dark, 20%);
|
|
border-color: darken($color-button-disabled, 10%);
|
|
cursor: default;
|
|
}
|
|
|
|
input.loading, button.loading {
|
|
&.ss-ui-action-constructive {
|
|
.ui-icon {
|
|
background: transparent url(../../images/network-save-constructive.gif) no-repeat 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-ui-button {
|
|
margin-top:0px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
line-height: $grid-y * 2;
|
|
color: lighten($color-text-dark, 10%);
|
|
border: 1px solid $color-button-generic-border;
|
|
border-bottom: 1px solid darken($color-button-generic-border, 10%);
|
|
cursor: pointer;
|
|
background-color: $color-button-generic;
|
|
white-space: nowrap;
|
|
|
|
@include background(
|
|
linear-gradient(color-stops(
|
|
lighten($color-button-generic, 10%),
|
|
darken($color-button-generic, 5%)
|
|
))
|
|
);
|
|
|
|
@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
|
|
|
|
&.ui-state-hover, &:hover {
|
|
text-decoration: none;
|
|
background-color: lighten($color-button-generic, 10%);
|
|
@include background(
|
|
linear-gradient(color-stops(
|
|
lighten($color-button-generic, 20%),
|
|
$color-button-generic
|
|
))
|
|
);
|
|
@include box-shadow(0 0 5px darken($color-button-generic, 20%));
|
|
}
|
|
|
|
&:active, &:focus, &.ui-state-active, &.ui-state-focus {
|
|
border: 1px solid darken($color-button-generic, 20%);
|
|
background-color: lighten($color-button-generic, 10%);
|
|
@include background(
|
|
linear-gradient(color-stops(
|
|
lighten($color-button-generic, 20%),
|
|
$color-button-generic
|
|
))
|
|
);
|
|
@include box-shadow(0 0 5px darken($color-button-generic, 20%) inset);
|
|
}
|
|
|
|
/* constructive */
|
|
&.ss-ui-action-constructive {
|
|
text-shadow:none;
|
|
font-weight: bold;
|
|
color: $color-text-light;
|
|
border-color: $color-button-constructive-border;
|
|
border-bottom-color: darken($color-button-constructive-border, 10%);
|
|
background-color: $color-button-constructive;
|
|
@include background(
|
|
linear-gradient(color-stops(
|
|
scale-color(lighten($color-button-constructive, 10%), $red:50%),
|
|
$color-button-constructive
|
|
))
|
|
);
|
|
@include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px);
|
|
|
|
&.ui-state-hover, &:hover {
|
|
border-color: darken($color-button-constructive-border, 10%);
|
|
background-color: $color-button-constructive;
|
|
@include background(
|
|
linear-gradient(color-stops(
|
|
scale-color(saturate(lighten($color-button-constructive, 10%), 10%), $red:60%),
|
|
lighten($color-button-constructive, 5%)
|
|
))
|
|
);
|
|
}
|
|
&:active, &:focus, &.ui-state-active, &.ui-state-focus {
|
|
background-color: darken($color-button-constructive, 2%);
|
|
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
|
|
}
|
|
}
|
|
|
|
/* destructive */
|
|
&.ss-ui-action-destructive {
|
|
color: $color-button-destructive;
|
|
background-color: $color-button-generic;
|
|
}
|
|
|
|
&.ss-ui-button-small {
|
|
.ui-button-text {
|
|
padding: ($grid-y/4) ($grid-x/4);
|
|
font-size: $font-base-size - 2;
|
|
}
|
|
}
|
|
|
|
&.ui-state-highlight {
|
|
background-color: $color-button-highlight;
|
|
border: 1px solid $color-button-highlight-border;
|
|
}
|
|
|
|
&.ss-ui-action-minor {
|
|
background: none;
|
|
border: 0;
|
|
color: lighten($color-text-dark, 10%);
|
|
text-decoration: underline;
|
|
|
|
@include box-shadow(none);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: $color-text-dark;
|
|
}
|
|
&:focus,
|
|
&:active {
|
|
text-decoration: none;
|
|
color: lighten($color-text-dark, 20%);
|
|
}
|
|
}
|
|
|
|
&.ss-ui-button-loading {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.ss-ui-buttonset {
|
|
.ui-button {
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
|
|
.ss-ui-buttonset {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.ss-ui-loading-icon {
|
|
background: url(../../images/network-save.gif) no-repeat;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* Grouped form fields
|
|
* ---------------------------------------------------- */
|
|
.fieldgroup {
|
|
.fieldgroup-field {
|
|
float: left;
|
|
display: block;
|
|
padding: $grid-y 0 0 $grid-x;
|
|
|
|
&.odd {
|
|
|
|
}
|
|
|
|
&.even {
|
|
|
|
}
|
|
|
|
.field {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.stacked {
|
|
.fieldgroup-field {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-toggle {
|
|
margin-bottom: $grid-y;
|
|
|
|
.ui-accordion-header {
|
|
font-weight: bold;
|
|
|
|
&.ui-state-default {
|
|
@include background-image(
|
|
linear-gradient(lighten($color-shadow-light, 15%), $color-shadow-light)
|
|
);
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
|
}
|
|
}
|
|
|
|
.ui-accordion-content {
|
|
padding: $grid-y*2 0 $grid-y 0;
|
|
|
|
.field {
|
|
@include box-shadow(none);
|
|
padding-left: $grid-x*2;
|
|
padding-right: $grid-x*2;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/** ----------------------------------------------------
|
|
* Checkbox Field
|
|
* ---------------------------------------------------- */
|
|
.field.checkbox {
|
|
padding-left: $grid-x * 23;
|
|
margin-bottom: $grid-y;
|
|
|
|
input {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
input.checkbox {
|
|
margin-left: 0
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* Radiobutton Field
|
|
* ---------------------------------------------------- */
|
|
.field.radio {
|
|
padding-left: $grid-x * 23;
|
|
margin-bottom: $grid-y;
|
|
|
|
input {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
input.radio {
|
|
margin-left: 0
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* Optionsets and Checkboxsets
|
|
* ---------------------------------------------------- */
|
|
.optionset {
|
|
padding-bottom: 8px;
|
|
|
|
li {
|
|
float: left;
|
|
display: block;
|
|
width: $grid-x * 27;
|
|
padding-bottom: $grid-x;
|
|
line-height: $grid-y * 2;
|
|
list-style: none;
|
|
|
|
input {
|
|
display: inline-block;
|
|
padding-right: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
label {
|
|
display: inline;
|
|
cursor: pointer;
|
|
padding-left: $grid-y;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/** ----------------------------------------------------
|
|
* HTML Text
|
|
* ---------------------------------------------------- */
|
|
|
|
.htmleditor {
|
|
|
|
textarea {
|
|
visibility: hidden; // enabled by JS
|
|
}
|
|
|
|
.mceEditor {
|
|
input, select {
|
|
width: auto;
|
|
}
|
|
}
|
|
label.left {
|
|
padding-bottom: $grid-y/2;
|
|
}
|
|
}
|
|
|
|
|
|
.action-hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|