mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
d642eee28e
1. Add arrows to edit dropdowns 2. Adjust lightened fields so they don't look like input boxes, and fix rgba colours 3. Add ability to click file names to edit 4. Add feedback when edit button is hovered 5. Add feedback if a file has been opened for editing and shut again (saved changes, unsaved changes, unchanged) 6. Add ability to open and close all files to edit them all at once 7. Add overall feedback for file uploads, and fix NaN error 8. Fix up area to match design 9. Fix error messages so they fit in the provided space 10. Fix case where a single uploaded file errors
125 lines
2.7 KiB
SCSS
125 lines
2.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;
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* 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;
|
|
}
|
|
|
|
.middleColumn {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* 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;}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
Mixin creates a transparent button with a dropdown arrow,
|
|
as is used for files in the files up-load area. The arrows
|
|
themselves are added in the _style file
|
|
**/
|
|
@mixin ss-uploadfield-editButton{
|
|
&.ss-uploadfield-item-edit {
|
|
opacity:0.9;
|
|
padding-top: 3px;
|
|
padding-bottom: 0;
|
|
height:100%;
|
|
@include border-radius(0);
|
|
&.ui-state-hover{
|
|
background:none;
|
|
opacity:1;
|
|
span.toggle-details{
|
|
opacity:1;
|
|
}
|
|
}
|
|
span.toggle-details{
|
|
opacity:0.9;
|
|
margin-left:3px;
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
.toggle-details-icon {
|
|
margin-top:1px;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
vertical-align: middle;
|
|
&.opened {
|
|
margin-top:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ui-icon {
|
|
display: none;
|
|
}
|
|
}
|