mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
659634557d
Important to allow users to send around preview links, open draft versions in new tabs, or find out which URL to use to preview on mobile phones and other devices which can't load the CMS preview panel directly. Removed CSS animations since they complicated the component too much. Removed input/label setup since its not contained in a form, so has no relevance as far as server-side state goes. This does mean there's no longer an indication that only one state can be active at a given time (which the radio buttons communicated), but that's no different from e.g. the CMS menu. Not an API change since the Entwine JS and PHP interfaces stay the same. Conflicts: admin/css/screen.css
756 lines
16 KiB
SCSS
756 lines
16 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;
|
|
@include doubleborder(bottom, $color-light-separator, $box-shadow-shine-minimal);
|
|
//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: $grid-y 0;
|
|
|
|
&.noborder, &:last-child {
|
|
padding-bottom: 0;
|
|
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;
|
|
}
|
|
.description {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&.checkbox label.right{
|
|
margin: $grid-y/2 0 0 0;
|
|
display:inline;
|
|
font-style: normal;
|
|
color: $color-text;
|
|
clear:none;
|
|
}
|
|
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;
|
|
clear: both;
|
|
color: lighten($color-text, 20%);
|
|
display: block;
|
|
font-style: italic;
|
|
margin: $grid-y/2 0 0 $grid-x*23;
|
|
}
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: $grid-x * 23;
|
|
}
|
|
|
|
span.readonly {
|
|
padding-top: $grid-y;
|
|
line-height: $grid-y * 2;
|
|
display: block;
|
|
}
|
|
|
|
.fieldgroup .fieldgroup-field.last { /* This is used on page/settings/visibility */
|
|
padding-bottom: 8px; /* replicates li item spacing */
|
|
}
|
|
|
|
// Additional help text to clarify the field intent,
|
|
// displayed alongside the field (rather than in a tooltip)
|
|
.description {
|
|
clear: both;
|
|
color: lighten($color-text, 20%);
|
|
display: block;
|
|
font-style: italic;
|
|
line-height: $grid-y * 2;
|
|
margin: $grid-y/2 0 0 $grid-x*23; // left align with .middleColumn
|
|
}
|
|
|
|
&.checkbox .description, &.ss-gridfield .description {
|
|
margin-left: 0;
|
|
}
|
|
|
|
input.text,
|
|
textarea,
|
|
select,
|
|
.TreeDropdownField {
|
|
margin-left: 10px;
|
|
width: 100%;
|
|
max-width: $grid-x * 64;
|
|
@include box-sizing(border-box);
|
|
&.description {
|
|
margin:0; //overrides help class adding left margin to the textarea input.
|
|
}
|
|
.description {
|
|
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 {
|
|
@include form-field-stacked;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
&.treedropdownfield-with-rise {
|
|
-webkit-border-radius: 0 0 4px 4px;
|
|
-moz-border-radius: 0 0 4px 4px;
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
.treedropdownfield-panel {
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
border-bottom: none;
|
|
|
|
-webkit-border-radius: 4px 4px 0 0;
|
|
-moz-border-radius: 4px 4px 0 0;
|
|
border-radius: 4px 4px 0 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 {
|
|
max-width: 416px;
|
|
.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;
|
|
}
|
|
|
|
div {
|
|
width: 24px;
|
|
|
|
b {
|
|
background-position: 4px 0px;
|
|
}
|
|
}
|
|
}
|
|
.chzn-choices {
|
|
@include border-radius(3px);
|
|
}
|
|
|
|
/* Date Fields */
|
|
input.month, input.day, input.year {
|
|
width: ($grid-x * 7);
|
|
}
|
|
|
|
input.time {
|
|
width: ($grid-x * 11); // 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 {
|
|
.button-no-style{
|
|
button{
|
|
@include border-radius(0);
|
|
background: none;
|
|
border: none;
|
|
color: $color-text-blue-link;
|
|
display: block;
|
|
font-weight:normal;
|
|
margin:0;
|
|
outline:none;
|
|
padding-left:10px;
|
|
padding-right:10px;
|
|
text-align: left;
|
|
text-shadow: none;
|
|
white-space:normal;
|
|
&.ss-ui-action-destructive{
|
|
color: darken($color-error,25%);
|
|
}
|
|
span{
|
|
padding-left:0;
|
|
padding-right:0;
|
|
}
|
|
&:hover, &:focus, &:active{
|
|
@include box-shadow(none);
|
|
outline:none;
|
|
background:none;
|
|
border:none;
|
|
}
|
|
&.loading {
|
|
background: transparent url(../../images/network-save.gif) no-repeat $grid-x center;
|
|
.ui-button-text {
|
|
padding-left: 16px /* icon */ + ($grid-x/2);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.Actions, .cms-actions-row {
|
|
> * {
|
|
display: block;
|
|
float: left;
|
|
margin-right: $grid-x;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
min-height: 30px;
|
|
overflow: auto;
|
|
padding: $grid-x $grid-y * 1.5;
|
|
}
|
|
.south .Actions, .ui-tabs-panel .Actions, .ui-tabs-panel iframe .Actions {
|
|
padding: 0;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
&.ss-ui-action-minor {
|
|
span {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
/* 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 {
|
|
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 $grid-x 0 0;
|
|
|
|
.field {
|
|
border: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.fieldholder-small {
|
|
padding: 0 0 $grid-y 0;
|
|
}
|
|
|
|
.fieldgroup input.text, .fieldgroup textarea, .fieldgroup select, .fieldgroup .TreeDropdownField {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Style specific label with display block, otherwise
|
|
// checkbox falls under the text
|
|
.fieldholder-small-label {
|
|
display: block;
|
|
}
|
|
|
|
label {
|
|
padding: $grid-y $grid-x $grid-y 0;
|
|
margin-left: 0;
|
|
margin-right: 1em;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
&.stacked {
|
|
.fieldgroup-field {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-toggle {
|
|
margin: $grid-y 0;
|
|
|
|
.ui-accordion-header {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
|
|
&.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-header-icon {
|
|
margin-top: -9px;
|
|
}
|
|
}
|
|
|
|
.ui-accordion-content {
|
|
padding: $grid-y 0 $grid-y*1.5;
|
|
|
|
.field {
|
|
@include box-shadow(none);
|
|
padding-left: $grid-x*1.5;
|
|
padding-right: $grid-x*1.5;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
}
|
|
label {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
.description {
|
|
margin-left: 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;
|
|
padding-top: 8px;
|
|
|
|
li {
|
|
float: left;
|
|
display: block;
|
|
width: $grid-x * 27;
|
|
padding-bottom: $grid-x;
|
|
padding-top: 0;
|
|
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;
|
|
}
|
|
|
|
}
|
|
&.field {
|
|
padding-top: 0;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/** ----------------------------------------------------
|
|
* HTML Text
|
|
* ---------------------------------------------------- */
|
|
|
|
.htmleditor {
|
|
|
|
@include form-field-stacked;
|
|
|
|
textarea {
|
|
visibility: hidden; // enabled by JS
|
|
}
|
|
|
|
.mceEditor {
|
|
input, select {
|
|
width: auto;
|
|
}
|
|
}
|
|
label.left {
|
|
padding-bottom: $grid-y/2;
|
|
}
|
|
}
|
|
|
|
|
|
.action-hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/***************************************************************
|
|
* On/Off Switch.
|
|
* Example html set-up:
|
|
* <fieldset class="switch-states">
|
|
* <div class="switch">
|
|
* <a href="my-page/?stage=Draft" class="first active"><span>Draft</span></a>
|
|
* <a href="my-page/?stage=Live" class="last"><span>Live</span></a>
|
|
* </div>
|
|
* </fieldset>
|
|
****************************************************************/
|
|
.switch-states{
|
|
padding:0 20px 0 0;
|
|
margin-right: 5px;
|
|
|
|
.switch{
|
|
@include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1));
|
|
@include border-radius(3px);
|
|
background:lighten(#2d3035,69%);
|
|
display: block;
|
|
height: 25px;
|
|
margin-top:3px;
|
|
width:100%;
|
|
z-index:5;
|
|
|
|
a {
|
|
@include hide-text-overflow;
|
|
@include text-shadow(0 1px 0 rgba(255,255,255,0.5));
|
|
color:lighten($color-text-dark,40%);
|
|
color:rgba($color-text-dark,0.5);
|
|
cursor: pointer;
|
|
float:left;
|
|
font-weight:bold;
|
|
height: 100%;
|
|
line-height: 25px;
|
|
z-index:2;
|
|
|
|
&:hover{
|
|
color:lighten($color-text-dark, 30%);
|
|
color:rgba($color-text-dark,0.7);
|
|
}
|
|
|
|
span {
|
|
@include box-sizing('border-box');
|
|
@include hide-text-overflow;
|
|
display:inline-block;
|
|
padding:0 10px;
|
|
@include text-shadow(0 1px 0 rgba(255,255,255,0.5));
|
|
color:lighten($color-text-dark,40%);
|
|
color:rgba($color-text-dark,0.5);
|
|
}
|
|
|
|
&.active {
|
|
@include background-image(linear-gradient(
|
|
#2b9c32,
|
|
#64ab36
|
|
));
|
|
@include border-radius(3px);
|
|
@include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2));
|
|
@include text-shadow(0 1px 0 rgba(255,255,255,0.5));
|
|
background-color: #2b9c32;
|
|
|
|
span {
|
|
color: #fff;
|
|
text-shadow: 0 -1px 0 darken($color-menu-button,10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |