silverstripe-framework/admin/scss/_mixins.scss

292 lines
5.6 KiB
SCSS
Raw Normal View History

//**
// * 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;
2012-05-15 22:15:36 +02:00
&.left {
float: none;
display: inherit;
width: auto;
padding: 0;
line-height: inherit;
}
}
.middleColumn {
margin-left: 0;
}
2012-05-15 22:15:36 +02:00
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-size-root;
}
h4 {
font-size: $font-size-root -1;
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;
2016-02-10 23:13:32 +01:00
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;
2016-02-10 23:13:32 +01:00
text-shadow: none;
&.fill{
&:before{
color:#fff;
content: '?';
font-size:12px;
2016-02-10 23:13:32 +01:00
box-sizing: border-box;
padding-left:3px;
padding-right:3px;
display:block;
float:left;
2016-02-10 23:13:32 +01:00
text-shadow: none;
border-radius: 50px;
background-color:lighten($color-text, 45%);
2016-02-18 05:33:47 +01:00
width:21px;
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;
}
.chosen-container-single{
width:100% !important;
.chosen-single{
padding: 0 0 0 5px;
float:none;
}
}
.cms-content-actions, .cms-preview-controls{
padding:0;
height:auto;
border:none;
2016-02-10 23:13:32 +01:00
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;
}
}
2016-02-10 23:13:32 +01:00
//** ----------------------------------------------------
// * 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;
}
}