mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-26 04:26:01 +02:00
292 lines
5.6 KiB
SCSS
292 lines
5.6 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;
|
|
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;
|
|
}
|
|
|
|
//** ----------------------------------------------------
|
|
// * 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;
|
|
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;
|
|
text-shadow: none;
|
|
&.fill{
|
|
&:before{
|
|
color:#fff;
|
|
content: '?';
|
|
font-size:12px;
|
|
box-sizing: border-box;
|
|
padding-left:3px;
|
|
padding-right:3px;
|
|
display:block;
|
|
float:left;
|
|
text-shadow: none;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
//** ----------------------------------------------------
|
|
// * Compass replacement mixins.
|
|
// *
|
|
// * Mixins that were built-in with compass
|
|
// * ----------------------------------------------------- */
|
|
|
|
@mixin legacy-pie-clearfix {
|
|
&:after {
|
|
content: "\0020";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
}
|