mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-28 21:46:10 +02:00
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
295 lines
5.7 KiB
SCSS
295 lines
5.7 KiB
SCSS
//**
|
|
// * This file contains generic mixins which we use throughout
|
|
// * the admin panels.
|
|
// *
|
|
// * Mixins should be stored here rather than individual files
|
|
// * so that we can keep.
|
|
// */
|
|
|
|
//** ----------------------------------------------------
|
|
// * Hides the overflowing text from a container
|
|
// *
|
|
// * Note: you must define a width on the element with this
|
|
// * overflow.
|
|
// * ----------------------------------------------------- */
|
|
@mixin hide-text-overflow {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
// could optionally use the compass mixin but that
|
|
// would require a 3rd party plugin
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
}
|
|
|
|
@mixin box-shadow-none{
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
//**----------------------------------------------------
|
|
//Clearfix mixin clears the float of it's parent element
|
|
//----------------------------------------------------**/
|
|
@mixin clearfix{
|
|
&:after{
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
*:first-child &{ zoom:1;}
|
|
}
|
|
|
|
|
|
|
|
//** ----------------------------------------------------
|
|
// * Clear the properties of sub form fields.
|
|
// *
|
|
// * Often needed for nested form fields and
|
|
// * ----------------------------------------------------- */
|
|
@mixin clear-form-field-styles {
|
|
.field {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
label {
|
|
float: none;
|
|
width: auto;
|
|
|
|
&.left {
|
|
float: none;
|
|
display: inherit;
|
|
width: auto;
|
|
padding: 0;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
}
|
|
|
|
input.text,
|
|
textarea,
|
|
select,
|
|
.TreeDropdownField {
|
|
width: auto;
|
|
max-width: auto;
|
|
}
|
|
}
|
|
|
|
//** ----------------------------------------------------
|
|
// * Double tone borders
|
|
// *
|
|
// * http://daverupert.com/2011/06/two-tone-borders-with-css3/
|
|
// * ----------------------------------------------------- */
|
|
@mixin doubleborder($side, $innerColor, $outerColor) {
|
|
$shadow: "0 0 0";
|
|
border-#{$side}: 1px solid $innerColor;
|
|
@if ($side == "top") { $shadow: 0 -1px 0; }
|
|
@if ($side == "right") { $shadow: 1px 0 0; }
|
|
@if ($side == "bottom") { $shadow: 0 1px 0; }
|
|
@if ($side == "left") { $shadow: -1px 0 0; }
|
|
-webkit-box-shadow: $shadow $outerColor;
|
|
-moz-box-shadow: $shadow $outerColor;
|
|
-o-box-shadow: $shadow $outerColor;
|
|
box-shadow: $shadow $outerColor;
|
|
}
|
|
|
|
|
|
@mixin transition($properties: margin 0.3s ease-in 0s){
|
|
-moz-transition: $properties;
|
|
-webkit-transition: $properties;
|
|
-o-transition: $properties;
|
|
transition: $properties;
|
|
}
|
|
|
|
@mixin duration($time, $webkit:true){
|
|
@if($webkit){
|
|
-webkit-transition-duration: $time;
|
|
}
|
|
-moz-transition-duration: $time;
|
|
-o-transition-duration: $time;
|
|
transition-duration: $time;
|
|
}
|
|
|
|
//** ----------------------------------------------------
|
|
// * Show label and field content in their own lines,
|
|
// * to maximize the available horizontal space.
|
|
// * ----------------------------------------------------- */
|
|
@mixin form-field-stacked {
|
|
label {
|
|
display: block;
|
|
float: none;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0px;
|
|
clear: left;
|
|
}
|
|
|
|
.description {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
|
|
/*Mixin used to generate slightly smaller text and forms
|
|
Used in side panels and action tabs
|
|
*/
|
|
@mixin tightSpacing{
|
|
h3,h4,h5 {
|
|
font-weight: bold;
|
|
line-height: $grid-y * 2;
|
|
}
|
|
h3 {
|
|
font-size: $font-base-size + 1;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-base-size;
|
|
margin:5px 0;
|
|
}
|
|
|
|
.ui-widget-content {
|
|
background: none;
|
|
}
|
|
|
|
.field {
|
|
/*
|
|
* Fields are more compressed in some areas compared to the
|
|
* main content editing window so the below alters the internal
|
|
* spacing of the fields so we can move that spacing to between
|
|
* the form fields rather than padding
|
|
*/
|
|
border-bottom:none;
|
|
@include box-shadow(none);
|
|
label {
|
|
float: none;
|
|
width: auto;
|
|
font-size: 12px;
|
|
padding: 0 $grid-x 4px 0;
|
|
&.extra-details{
|
|
overflow:hidden;
|
|
margin-top:10px;
|
|
display: block;
|
|
color: lighten($color-text, 35%);
|
|
font-style:italic;
|
|
font-weight:normal;
|
|
font-size:1em;
|
|
float:left;
|
|
@include text-shadow(none);
|
|
&.fill{
|
|
&:before{
|
|
color:#fff;
|
|
content: '?';
|
|
font-size:12px;
|
|
@include box-sizing('border-box');
|
|
padding-left:3px;
|
|
padding-right:3px;
|
|
display:block;
|
|
float:left;
|
|
@include text-shadow(none);
|
|
@include border-radius(50px);
|
|
background-color:lighten($color-text, 45%);
|
|
width:15px;
|
|
height:15px;
|
|
margin-right:5px;
|
|
margin-bottom:5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.middleColumn {
|
|
margin: 0;
|
|
}
|
|
|
|
input.text,
|
|
select,
|
|
textarea {
|
|
padding: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
&.checkbox {
|
|
padding: 0 8px 0;
|
|
|
|
input {
|
|
margin: 2px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fieldgroup {
|
|
.fieldgroup-field {
|
|
padding: 0;
|
|
|
|
.field {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Restyle for smaller area*/
|
|
.cms-content-fields{
|
|
overflow:visible;
|
|
}
|
|
.chzn-container-single{
|
|
width:100% !important;
|
|
.chzn-single{
|
|
padding: 0 0 0 5px;
|
|
float:none;
|
|
}
|
|
}
|
|
.cms-content-actions, .cms-preview-controls{
|
|
padding:0;
|
|
height:auto;
|
|
border:none;
|
|
@include box-shadow(none);
|
|
}
|
|
.cms-edit-form{
|
|
width:100%;
|
|
}
|
|
.CompositeField{
|
|
margin:0;
|
|
padding:0;
|
|
float:none;
|
|
}
|
|
.parent-mode{
|
|
padding-top:0;
|
|
}
|
|
.treedropdown, .SelectionGroup li.selected div.field{
|
|
margin:10px 0 0 0;
|
|
//@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1));
|
|
.treedropdownfield-title{
|
|
position:absolute;
|
|
z-index:2;
|
|
padding:5px;
|
|
}
|
|
.treedropdownfield-panel{
|
|
margin-top:11px;
|
|
}
|
|
.treedropdownfield-toggle-panel-link{
|
|
background:none;
|
|
border-left:none;
|
|
padding:5px 3px;
|
|
.ui-icon{
|
|
float:right;
|
|
opacity:0.7;
|
|
}
|
|
}
|
|
}
|
|
.cms-add-form ul.SelectionGroup{
|
|
padding-left:0;
|
|
padding-right:0;
|
|
overflow:visible;
|
|
border-bottom:none;
|
|
}
|
|
}
|