mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-09 03:01:18 +02:00
3ee8f505b7
The main benefit of this is so that authors who make use of
.editorconfig don't end up with whitespace changes in their PRs.
Spaces vs. tabs has been left alone, although that could do with a
tidy-up in SS4 after the switch to PSR-1/2.
The command used was this:
for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//'
done
1127 lines
22 KiB
SCSS
1127 lines
22 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;
|
|
}
|
|
|
|
// When a field's description is toggleable, it's given an icon (right title) which is used as
|
|
// a click target for toggling the visibility of the description. See LeftAndMain.FieldDescriptionToggle.js
|
|
&.cms-description-toggle {
|
|
|
|
> .middleColumn { // The field wrapper
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 0;
|
|
width: 36%;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.right { // The column the trigger is inside.
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
height: 15px;
|
|
margin: 0 0 0 7px;
|
|
}
|
|
|
|
.btn-icon-information { // The default icon.
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.description {
|
|
padding: 12px 0;
|
|
width: 36%;
|
|
}
|
|
|
|
// Overrides of the above default styles, for specific field types.
|
|
&.textarea,
|
|
&.htmleditor,
|
|
&.optionset,
|
|
&.listbox,
|
|
&.upload {
|
|
.right {
|
|
vertical-align: top;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
&.htmleditor {
|
|
.middleColumn,
|
|
.description {
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
&.optionset {
|
|
.right {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
li {
|
|
width: 170px;
|
|
}
|
|
}
|
|
|
|
&.listbox {
|
|
select {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&.upload {
|
|
.description {
|
|
margin-left: 184px;
|
|
}
|
|
}
|
|
|
|
.cms-file-info-data & {
|
|
> .middleColumn {
|
|
margin-left: 8px !important;
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.description {
|
|
margin-left: 104px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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: 512px;
|
|
vertical-align: bottom;
|
|
|
|
.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: 30px;
|
|
line-height: 30px; /* 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 3px;
|
|
}
|
|
}
|
|
}
|
|
.chzn-choices {
|
|
@include border-radius(3px);
|
|
|
|
.search-choice {
|
|
line-height: 16px;
|
|
.search-choice-close {
|
|
top: 5px;
|
|
}
|
|
}
|
|
.search-field input {
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* font-icon buttons */
|
|
&[class*="font-icon-"],
|
|
&[class^="font-icon-"],
|
|
&.ss-ui-button-constructive[class*="font-icon-"] {
|
|
padding: 5px 8px;
|
|
margin-bottom: $grid-y*1.5;
|
|
vertical-align: middle;
|
|
box-shadow: none;
|
|
border: 0;
|
|
background: none;
|
|
text-shadow: none;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
color: $color-text;
|
|
|
|
&:hover {
|
|
@include box-shadow(none);
|
|
background: #dee3e8;
|
|
color: $color-text;
|
|
border: 0;
|
|
}
|
|
|
|
&:focus {
|
|
@include box-shadow(none);
|
|
background: #dee3e8;
|
|
color: $color-text;
|
|
border: 0;
|
|
}
|
|
|
|
&:before {
|
|
font-size: 16px;
|
|
margin-right: 5px;
|
|
margin-top: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.ui-state-focus {
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
@include box-shadow(0 0 3px rgba(191, 194, 196, .9) inset);
|
|
background: #dee3e8;
|
|
color: $color-text;
|
|
border: 0;
|
|
}
|
|
|
|
.ui-button-text {
|
|
@include inline-block;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&.ss-ui-button {
|
|
float: left;
|
|
}
|
|
}
|
|
.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 class="switch-states size_2">
|
|
* <div class="switch">
|
|
* <input id="Draft" class="first" name="view" type="radio" checked>
|
|
* <label for="Draft">Draft</label>
|
|
* <input id="Published" class="last" name="view" type="radio">
|
|
* <label for="Published">Published</label>
|
|
* <span class="slide-button"></span>
|
|
* </div>
|
|
* </fieldset>
|
|
****************************************************************/
|
|
fieldset.switch-states{
|
|
margin-right: 8px;
|
|
|
|
.switch{
|
|
border: 2px solid lighten(#2d3035,65%);
|
|
@include border-radius(3px);
|
|
-webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit.
|
|
background:lighten(#2d3035,69%);
|
|
display: block;
|
|
height: 24px;
|
|
position: relative;
|
|
width:100%;
|
|
z-index:5;
|
|
|
|
label{
|
|
@include hide-text-overflow;
|
|
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;
|
|
min-width: 80px;
|
|
/* 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;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
input {
|
|
opacity: 0;
|
|
filter: alpha(opacity = 0);
|
|
visibility:none;
|
|
position: absolute;
|
|
&:checked + label {
|
|
@include transition(all 0.3s ease-out 0s);
|
|
color: #fff;
|
|
}
|
|
}
|
|
.slide-button{
|
|
@include border-radius(3px);
|
|
@include transition(all 0.3s ease-out 0s);
|
|
background-color: #2b9c32;
|
|
display:block;
|
|
height: 24px;
|
|
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; } }
|
|
|
|
//Styling for filter/search dropdown
|
|
.cms-content-filters {
|
|
fieldset {
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
}
|
|
|
|
.fieldgroup {
|
|
width: 50%;
|
|
display: inline-block;
|
|
max-width: 440px;
|
|
padding-right: 16px;
|
|
padding-left: 16px;
|
|
margin-bottom: 16px;
|
|
box-sizing: border-box;
|
|
margin-right: -2px;
|
|
vertical-align: top;
|
|
|
|
.first {
|
|
label, h1, h2, h3, h4, h5 {
|
|
display: block;
|
|
width: 176px;
|
|
padding: 8px 8px 6px 0;
|
|
line-height: 16px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
font-size: 100%;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
width: 100%;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.fieldgroup-field {
|
|
position: relative;
|
|
margin-right: 0;
|
|
width: 48%;
|
|
display: inline-block;
|
|
padding: 0;
|
|
|
|
.description {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
top: 28px;
|
|
font-style: italic;
|
|
color: #777;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&.first {
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
&.last {
|
|
padding-right: 0;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.fieldgroup {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
border: none;
|
|
box-shadow: none;
|
|
width: 50%;
|
|
max-width: 440px;
|
|
display: inline-block;
|
|
margin: 0 0 8px 0;
|
|
padding-right: 16px;
|
|
padding-left: 16px;
|
|
padding-bottom: 0;
|
|
box-sizing: border-box;
|
|
margin-right: -2px;
|
|
vertical-align: top;
|
|
|
|
label.left {
|
|
text-shadow: none;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
&.dropdown {
|
|
float: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.chzn-container {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input.text {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&.checkbox {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.importSpec {
|
|
margin-bottom: 8px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.description {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.middleColumn {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.Actions {
|
|
margin: 8px 0 16px;
|
|
}
|
|
|
|
@media screen and (max-width:767px) {
|
|
fieldset {
|
|
.field,
|
|
.fieldgroup {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Context specific rules for when the filters are in a panel
|
|
.cms-panel & {
|
|
.field,
|
|
.fieldgroup {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.fieldgroup-field {
|
|
h4 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
label {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.Actions {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|