silverstripe-framework/admin/scss/_mixins.scss

97 lines
2.2 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;
}
//** ----------------------------------------------------
// * 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;
}
//**----------------------------------------------------
//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;}
}