/** * 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-light-separator; @include box-shadow(0 1px 0 $box-shadow-shine-minimal); //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: $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); } // 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; } label { 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. * Supports switching between up to 5 values (used for Draft/Published) * Example html set-up: *
*
* * * * * *
*
****************************************************************/ 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); -webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit. background:lighten(#2d3035,69%); display: block; height: 25px; margin-top:3px; padding:0 10px; position: relative; width:100%; z-index:5; label{ @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; position:relative; z-index:2; /* Make text unselectable in browsers that support that */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &: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; } } input { opacity: 0; filter: alpha(opacity = 0); visibility:none; position: absolute; &:checked + label { @include transition(all 0.3s ease-out 0s); color: #fff; text-shadow: 0 -1px 0 darken($color-menu-button,10%); } } .slide-button{ @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)); @include transition(all 0.3s ease-out 0s); background-color: #2b9c32; display:block; height: 100%; left:0; padding: 0; position: absolute; top: 0; z-index: 1; } } /* Produce css for up to 5 states. Note: with a little adjustment the switch can take more than 5 items, but a dropdown would probably be more appropriate */ @for $i from 1 through 5 { &.size_#{$i} { label, .slide-button { width: 100% / $i; } @if $i == 1{ label span{ padding-right:0; //even up the padding for a single item } } input:checked:nth-of-type(2) ~ .slide-button { left: 100% / $i; } input:checked:nth-of-type(3) ~ .slide-button { left: (100% / $i) * 2; } input:checked:nth-of-type(4) ~ .slide-button { left: (100% / $i) * 3; } input:checked:nth-of-type(5) ~ .slide-button { left: (100% / $i) * 4; } } } } //old web-kit browser fix @-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }