Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

498 lines (421 sloc) 11.87 kb
/**
* 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.
*
* @package sapphire
* @subpackage admin
*/
/** ----------------------------------------------------
* Basic form fields
* ---------------------------------------------------- */
/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
@mixin actionButtonSprite($name) {
padding-left: 24px;
padding-right: 6px;
@include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover {
@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
&.ui-state-disabled {
background-image: none;
@include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
@include background(sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat,
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
$color-button-generic
))
);
}
}
@mixin actionButtonSpriteConstructive($name) {
background-image: none;
padding-left: 25px;
padding-right: 7px;
font-weight: bold;
margin-left: $grid-horizontal;
color: $color-text-light;
border-color: $color-button-constructive-border;
border-bottom-color: darken($color-button-constructive-border, 10%);
@include background($color-button-constructive sprite($btn_icons, $name, 6, 6) no-repeat);
@include background(sprite($btn_icons, $name
, 6, 6) no-repeat,
linear-gradient(color-stops(
lighten($color-button-constructive, 10%),
darken($color-button-constructive, 5%)
))
);
@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
&.ui-state-hover {
border-color: darken($color-button-constructive-border, 10%);
@include background(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
@include background(sprite($btn_icons, $name, 6, 6) no-repeat,
linear-gradient(color-stops(
lighten($color-button-constructive, 15%),
$color-button-constructive
))
);
}
&:active, &:focus {
padding: $grid-vertical 8px $grid_vertical 26px;
border: none;
@include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 7, 7) no-repeat);
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
}
}
form.nostyle {
@include clear-form-field-styles();
}
.field {
display: block;
padding: 10px 0;
border-bottom: 1px solid $color-shadow-light;
@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
//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-vertical - 1 0;
margin: 0 0 $grid-vertical 0;
// 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;
}
}
label {
&.left {
float: left;
display: block;
width: $grid-horizontal * 21;
padding: $grid-vertical $grid-horizontal $grid-vertical 0;
line-height: $grid-vertical * 2;
font-weight: bold;
@include text-shadow(1px 1px 0 $color-text-shadow);
span {
display: block;
font-size: $font-base-size - 1;
color: lighten($color-text, 25%);
@include hide-text-overflow();
}
}
&.right {
cursor: pointer;
}
}
.middleColumn {
margin-left: $grid-horizontal * 23;
}
span.readonly {
padding-top: $grid-vertical;
line-height: $grid-vertical * 2;
display: block;
}
input.text,
textarea,
select,
.TreeDropdownField {
width: 90%;
max-width: $grid-horizontal * 64;
}
input.text,
textarea,
.TreeDropdownField {
background: #fff;
border: 1px solid lighten($color-medium-separator, 20%);
padding: ($grid-vertical - 1) ($grid-horizontal - 1);
line-height: $grid-vertical * 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(#efefef, #fff 10%, #fff 90%, #efefef));
&: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],
textarea[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%);
}
/* TreeDropdowns */
.TreeDropdownField {
padding: 0 14px 0 0;
.treedropdownfield-panel {
border: 1px solid lighten($color-medium-separator, 20%);
border-top: none;
padding-right: 14px;
@include border-bottom-left-radius(4px);
@include border-bottom-right-radius(4px);
}
.treedropdownfield-toggle-panel-link {
margin-right: -14px;
}
&.treedropdownfield-open-tree {
@include border-bottom-left-radius(0);
@include border-bottom-right-radius(0);
}
}
/* dropdowns */
.dropdown {
select {
margin-top: $grid-vertical;
}
}
/* chzn override */
.chzn-container {
.chzn-results {
li {
font-size: 11px;
line-height: $grid-vertical * 2;
padding: $grid-vertical / 2 $grid-horizontal / 2;
}
}
}
.chzn-container-active {
.chzn-single {
border: 1px solid lighten($color-medium-separator, 10%);
}
}
.chzn-container-single .chzn-single {
height: 30px;
line-height: 32px; /* 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: 1px 4px;
}
}
}
/* Date Fields */
input.hasDatepicker {
width: 50%;
max-width: ($grid-horizontal * 12);
}
}
/** ----------------------------------------------------
* Buttons
* ---------------------------------------------------- */
.Actions {
min-height: 30px;
& > div {
overflow: auto;
}
}
.cms-preview-toggle-link {
display: block;
float: right;
font-size: 12px;
text-decoration: none;
}
.cms, body.ArrayData {
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: 24px;
color: lighten($color-text-dark, 20%);
background: $color-button-disabled url(../../images/network-save.gif) no-repeat 4px center;
border-color: darken($color-button-disabled, 10%);
cursor: default;
@include text-shadow(none);
@include box-shadow(none);
}
.ss-ui-button {
/* all buttons */
padding: ($grid-vertical - 1) ($grid-horizontal + 4);
font-weight: bold;
text-decoration: none;
margin: 0;
line-height: $grid-vertical * 2;
color: lighten($color-text-dark, 10%);
background-color: $color-button-generic;
border: 1px solid $color-button-generic-border;
border-bottom: 1px solid darken($color-button-generic-border, 10%);
@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
@include background($color-button-generic);
@include background(
linear-gradient(color-stops(
lighten($color-button-generic, 10%),
darken($color-button-generic, 5%)
))
);
&.ui-state-hover {
border: 1px solid darken($color-button-generic-border, 10%);
@include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px);
@include background(lighten($color-button-generic, 10%));
@include background(
linear-gradient(color-stops(
lighten($color-button-generic, 20%),
darken($color-button-generic, 5%)
))
);
}
&:focus,
&:active {
border: 1px solid lighten($color-button-generic, 40%);
@include box-shadow(0 3px 3px darken($color-button-generic, 40%) inset);
@include background(darken($color-button-generic, 30%));
@include background(
linear-gradient(color-stops(
$color-button-generic,
darken($color-button-generic, 30%)
))
);
}
/* constructive */
&.ss-ui-action-constructive {
@include actionButtonSpriteConstructive('accept');
}
&.cms-page-add-button {
@include actionButtonSpriteConstructive('add');
}
/* destructive */
&.ss-ui-action-destructive {
color: $color-button-destructive;
background-color: $color-button-generic;
&.delete {
@include actionButtonSprite('decline');
}
&.unpublish {
@include actionButtonSprite('unpublish');
}
}
/* generic action buttons */
&.save-draft {
@include actionButtonSprite('addpage');
}
&.cms-preview-toggle-link {
padding-left: 24px !important;
margin-left: 4px !important;
text-decoration: none;
@include actionButtonSprite('preview');
}
&.ss-ui-button-small {
padding: ($grid-vertical/2) ($grid-horizontal/2);
}
&.ui-state-highlight {
background-color: $color-button-highlight;
border: 1px solid $color-button-highlight-border;
}
&.ss-ui-action-minor {
background: none;
padding: 0;
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%);
}
}
}
}
/** ----------------------------------------------------
* Grouped form fields
* ---------------------------------------------------- */
.fieldgroup {
.fieldgroup-field {
float: left;
display: block;
width: $grid-horizontal * 23;
padding-right: $grid-horizontal;
&.odd {
}
&.even {
}
.field {
border: none;
padding-bottom: 0;
}
}
}
/** ----------------------------------------------------
* Checkbox Field
* ---------------------------------------------------- */
.field {
&.checkbox {
padding-left: $grid-horizontal * 24;
margin-bottom: $grid-vertical;
}
}
/** ----------------------------------------------------
* Optionsets and Checkboxsets
* ---------------------------------------------------- */
.optionset {
overflow: hidden;
padding-bottom: 8px;
li {
float: left;
display: block;
width: $grid-horizontal * 27;
padding: $grid-vertical $grid-horizontal 0;
line-height: $grid-vertical * 2;
list-style: none;
position: relative;
input {
position: absolute;
top: $grid-vertical + 1; // used to get the input off the edge, the overflow
left: 2px; // hidden crops the glow.
margin: 0;
}
label {
display: block;
cursor: pointer;
padding: 0 0 0 $grid-vertical * 2;
}
}
}
/** ----------------------------------------------------
* HTML Text
* ---------------------------------------------------- */
.htmleditor {
textarea {
visibility: hidden; // enabled by JS
}
label {
display: block;
float: none;
padding-bottom: 10px;
}
.middleColumn {
margin-left: 0px;
clear: left;
}
}
.action-hidden {
display: none;
}
Jump to Line
Something went wrong with that request. Please try again.