silverstripe-framework/scss/AssetUploadField.scss

390 lines
8.4 KiB
SCSS
Raw Normal View History

// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
@import "../admin/scss/themes/default.scss";
@import "../admin/scss/_mixins";
@import "_elementMixins";
.ss-uploadfield-view-allowed-extensions {
margin-top: -42px;
float: right;
2015-11-05 06:36:59 +01:00
.toggle-content {
opacity: 0;
box-sizing: border-box;
position: absolute;
z-index: 1;
padding: 2.5*$grid-y 2*$grid-x;
width: 280px;
right: -280px;
top: 0;
bottom: 0;
border-left: 1px solid $color-separator;
box-shadow: 0 0 3px $color-separator;
background: $tab-panel-texture-color;
transition: all .3s linear;
Merge remote-tracking branch 'origin/3' # Conflicts: # control/Director.php # control/HTTP.php # core/startup/ParameterConfirmationToken.php # docs/en/00_Getting_Started/01_Installation/05_Common_Problems.md # docs/en/00_Getting_Started/04_Directory_Structure.md # docs/en/00_Getting_Started/05_Coding_Conventions.md # docs/en/01_Tutorials/01_Building_A_Basic_Site.md # docs/en/01_Tutorials/02_Extending_A_Basic_Site.md # docs/en/01_Tutorials/03_Forms.md # docs/en/01_Tutorials/04_Site_Search.md # docs/en/01_Tutorials/05_Dataobject_Relationship_Management.md # docs/en/02_Developer_Guides/12_Search/01_Searchcontext.md # docs/en/02_Developer_Guides/13_i18n/index.md # docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/06_Javascript_Development.md # docs/en/03_Upgrading/index.md # docs/en/changelogs/index.md # docs/en/howto/customize-cms-menu.md # docs/en/howto/navigation-menu.md # docs/en/index.md # docs/en/installation/index.md # docs/en/installation/windows-manual-iis-6.md # docs/en/misc/contributing/code.md # docs/en/misc/contributing/issues.md # docs/en/misc/module-release-process.md # docs/en/reference/dataobject.md # docs/en/reference/execution-pipeline.md # docs/en/reference/grid-field.md # docs/en/reference/modeladmin.md # docs/en/reference/rssfeed.md # docs/en/reference/templates.md # docs/en/topics/commandline.md # docs/en/topics/debugging.md # docs/en/topics/email.md # docs/en/topics/forms.md # docs/en/topics/index.md # docs/en/topics/module-development.md # docs/en/topics/modules.md # docs/en/topics/page-type-templates.md # docs/en/topics/page-types.md # docs/en/topics/search.md # docs/en/topics/testing/index.md # docs/en/topics/testing/testing-guide-troubleshooting.md # docs/en/topics/theme-development.md # docs/en/tutorials/1-building-a-basic-site.md # docs/en/tutorials/2-extending-a-basic-site.md # docs/en/tutorials/3-forms.md # docs/en/tutorials/4-site-search.md # docs/en/tutorials/5-dataobject-relationship-management.md # docs/en/tutorials/building-a-basic-site.md # docs/en/tutorials/dataobject-relationship-management.md # docs/en/tutorials/extending-a-basic-site.md # docs/en/tutorials/forms.md # docs/en/tutorials/index.md # docs/en/tutorials/site-search.md # main.php # model/SQLQuery.php # security/ChangePasswordForm.php # security/MemberLoginForm.php # tests/control/ControllerTest.php # tests/core/startup/ParameterConfirmationTokenTest.php # tests/model/SQLQueryTest.php # tests/security/SecurityTest.php # tests/view/SSViewerTest.php # view/SSTemplateParser.php # view/SSTemplateParser.php.inc # view/SSViewer.php
2016-01-20 01:16:27 +01:00
2015-11-05 06:36:59 +01:00
h4 {
margin: 0 0 6px;
padding-right: 20px;
}
}
&.active .toggle-content {
right: 0;
opacity: 1;
}
.toggle {
2015-11-05 06:36:59 +01:00
cursor: pointer;
font-size: 16px;
float: right;
2015-11-05 06:36:59 +01:00
color: $color-text;
width: 16px;
height: 16px;
overflow: hidden;
&:hover,
&:active,
&:focus {
text-decoration: none;
2015-11-05 06:36:59 +01:00
color: darken($color-text, 10%);;
}
}
}
.backlink {
padding-left: 12px;
}
body.cms.ss-uploadfield-edit-iframe {
overflow: auto;
background: #E2E2E2;
2012-05-13 21:05:30 +02:00
span.readonly {
font-style:italic;
color:lighten($color-text, 20%);
text-shadow: 0px 1px 0px #fff;
}
.fieldholder-small{
label{
margin-left:0;
}
}
}
.composite.ss-assetuploadfield .details fieldset {
@extend body.cms.ss-uploadfield-edit-iframe;
padding: $grid-x*2;
}
.ss-assetuploadfield {
border-bottom: 0;
2016-02-10 23:13:32 +01:00
box-shadow: none;
margin: 0;
padding: 0;
h3 {
border-bottom: 1px solid $color-shadow-light;
2016-02-10 23:13:32 +01:00
box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
margin: 0 0 8px;
padding: 0 0 7px;
clear: both;
position:relative;
}
2012-02-21 21:16:52 +01:00
.field {
border-bottom: 0;
box-shadow:none;
2012-02-21 21:16:52 +01:00
}
.fileOverview{
clear:both;
margin-top:10px;
position:relative;
2012-05-13 21:05:30 +02:00
.uploadStatus{
@include clearfix;
.state{
float:left;
font-size: 16px;
font-weight:bold;
line-height:1.1em;
}
.details{
opacity:0.9;
float:right;
}
}
}
.ss-uploadfield-item-actions.edit-all{
.ss-uploadfield-item-edit-all {
2015-10-23 05:01:40 +02:00
float: right;
margin: -8px 0 0;
padding:0;
background: none;
border: 0;
2016-02-10 23:13:32 +01:00
box-shadow: none;
color: $color-text;
2015-10-23 05:01:40 +02:00
&:hover{
2015-10-23 05:01:40 +02:00
color: lighten($color-text, 10%);
}
}
}
.ss-uploadfield-files {
margin: 0;
padding: 0;
clear:both;
.ss-uploadfield-item {
border: 1px solid lighten($color-medium-separator, 20%);
2016-02-10 23:13:32 +01:00
border-radius: 5px;
background-clip: padding-box;
margin: 0 0 5px;
padding: 0;
overflow: hidden;
position: relative;
.info {
position: relative;
padding: 7px;
overflow: hidden;
background-color: #FFBE66;
border: 1px solid #FF9300;
}
}
.ss-uploadfield-item-preview {
position: absolute;
height: 30px;
width: 40px;
overflow: hidden;
z-index: 1;
.no-preview{
display:block;
height:100%;
width:100%;
background:url('../images/icons/document.png') 2px 0px no-repeat;
}
}
.ss-uploadfield-item-info {
position: relative;
line-height: 30px;
overflow: hidden;
background-color: #5db4df;
background-image: linear-gradient(to bottom, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%);
}
.ui-state-error .ss-uploadfield-item-info {
background-color: #c11f1d;
padding-right:130px;
background-image: linear-gradient(to bottom, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%);
2012-05-13 21:05:30 +02:00
.ss-uploadfield-item-name {
width:100%;
cursor:default;
background: darken($color-button-disabled,20%); //for browsers that don't support rgba
background: rgba(darken($color-button-disabled, 15%),0.9);
2012-05-13 21:05:30 +02:00
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.7);
}
}
}
.ui-state-warning .ss-uploadfield-item-info {
background-color: $color-warning;
2016-02-10 23:13:32 +01:00
background-image: linear-gradient(
to bottom,
2016-02-10 23:13:32 +01:00
desaturate(lighten($color-warning, 10%), 20%) 0%,
desaturate(lighten($color-warning, 5%), 20%) 8%,
desaturate($color-warning, 20%) 50%,
desaturate(darken(mix($color-warning, $color-button-destructive, 99%),0%), 20%) 54%,
desaturate(darken(mix($color-warning, $color-button-destructive, 80%),1%), 20%) 96%,
desaturate(darken(mix($color-warning, $color-button-destructive, 70%),2%), 20%) 100%
);
}
.ss-uploadfield-item-name {
position: relative;
z-index: 1;
margin: 3px 0 3px 50px;
width: 50%;
color:lighten($color-text, 10%);
background:$color-button-disabled; //for browsers that don't support rgba
background: rgba(#fff, 0.8);
2016-02-10 23:13:32 +01:00
border-radius: 3px;
line-height: 24px;
height: 22px;
padding: 0 5px;
text-align: left;
cursor:pointer;
//display:table, and table-layout:fixed allows us to use percentages with text-overflow
display:table;
2012-05-13 21:05:30 +02:00
table-layout:fixed;
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
display:inline;
float:left;
max-width:50%;
font-weight: normal;
padding: 0 5px 0 0;
@include hide-text-overflow;
}
.ss-uploadfield-item-status {
position:relative;
float: right;
padding: 0 0 0 5px;
max-width:30%;
@include hide-text-overflow;
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
2012-05-13 21:05:30 +02:00
&.ui-state-error-text {
text-shadow: 0px 1px 0px rgba(#fff, 0.6);
color: darken($color-button-destructive, 10%);
}
&.ui-state-warning-text {
color: darken($color-warning, 10%);
}
&.ui-state-success-text {
color: $color-button-constructive;
}
}
2012-05-13 21:05:30 +02:00
}
.ss-uploadfield-item-actions {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
2012-05-13 21:05:30 +02:00
color: #f00;
@include ss-uploadfield-action-buttons;
font-size:14px;
}
.ss-uploadfield-item-progress {
width: 100%;
div {
2016-02-10 23:13:32 +01:00
border-radius: 5px;
height: 30px;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.ss-uploadfield-item-progressbar {
background-color: #92a6b3;
background-image: linear-gradient(to bottom, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%);
}
.ss-uploadfield-item-progressbarvalue {
width: 0;
background: #60b3dd url(../images/progressbar_blue.gif) repeat left center;
}
}
.ss-uploadfield-item-editform {
/* don't use display none, for it will break jQuery('iframe').contents().height() */
height: 0;
overflow: hidden;
clear: both;
&.loading {
width: 100%;
height: 22px;
padding: 15px 0;
background: url(../admin/images/spinner.gif) no-repeat 50% 50%;
iframe {
/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
padding-top: 0; margin-top: 37px;
border: none;
}
}
iframe {
width: 100%;
padding: $grid-x*2;
background: #E2E2E2;
}
}
}
.ss-uploadfield-addfile {
2015-10-23 05:01:40 +02:00
margin: 0;
padding: 0;
.ss-uploadfield-item-info {
2015-10-23 05:01:40 +02:00
margin: 0;
> span {
display: block;
padding: 0;
line-height: 1;
color: lighten($color-text, 20%);
margin-top: -12px;
}
2015-10-23 05:01:40 +02:00
.upload-url::before {
font-size: 23px;
}
}
.ss-uploadfield-fromcomputer {
2015-10-23 05:01:40 +02:00
margin: 12px 2px;
overflow: hidden;
font-weight: normal;
2015-10-23 05:01:40 +02:00
.ss-insert-media &{
2015-10-23 05:01:40 +02:00
margin: 0 12px 0 0;
}
&::before {
2015-10-23 05:01:40 +02:00
font-size: 23px;
margin-right: 6px;
}
}
}
}
.ss-uploadfield-dropzone {
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(236, 239, 241, .9) url('../admin/images/drag_drop_opt.svg') center center no-repeat;
background-size: 312px 325px;
z-index: 100;
}
&.active.hover {
&::after {
content: '';
}
Merge remote-tracking branch 'origin/3' # Conflicts: # control/Director.php # control/HTTP.php # core/startup/ParameterConfirmationToken.php # docs/en/00_Getting_Started/01_Installation/05_Common_Problems.md # docs/en/00_Getting_Started/04_Directory_Structure.md # docs/en/00_Getting_Started/05_Coding_Conventions.md # docs/en/01_Tutorials/01_Building_A_Basic_Site.md # docs/en/01_Tutorials/02_Extending_A_Basic_Site.md # docs/en/01_Tutorials/03_Forms.md # docs/en/01_Tutorials/04_Site_Search.md # docs/en/01_Tutorials/05_Dataobject_Relationship_Management.md # docs/en/02_Developer_Guides/12_Search/01_Searchcontext.md # docs/en/02_Developer_Guides/13_i18n/index.md # docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/06_Javascript_Development.md # docs/en/03_Upgrading/index.md # docs/en/changelogs/index.md # docs/en/howto/customize-cms-menu.md # docs/en/howto/navigation-menu.md # docs/en/index.md # docs/en/installation/index.md # docs/en/installation/windows-manual-iis-6.md # docs/en/misc/contributing/code.md # docs/en/misc/contributing/issues.md # docs/en/misc/module-release-process.md # docs/en/reference/dataobject.md # docs/en/reference/execution-pipeline.md # docs/en/reference/grid-field.md # docs/en/reference/modeladmin.md # docs/en/reference/rssfeed.md # docs/en/reference/templates.md # docs/en/topics/commandline.md # docs/en/topics/debugging.md # docs/en/topics/email.md # docs/en/topics/forms.md # docs/en/topics/index.md # docs/en/topics/module-development.md # docs/en/topics/modules.md # docs/en/topics/page-type-templates.md # docs/en/topics/page-types.md # docs/en/topics/search.md # docs/en/topics/testing/index.md # docs/en/topics/testing/testing-guide-troubleshooting.md # docs/en/topics/theme-development.md # docs/en/tutorials/1-building-a-basic-site.md # docs/en/tutorials/2-extending-a-basic-site.md # docs/en/tutorials/3-forms.md # docs/en/tutorials/4-site-search.md # docs/en/tutorials/5-dataobject-relationship-management.md # docs/en/tutorials/building-a-basic-site.md # docs/en/tutorials/dataobject-relationship-management.md # docs/en/tutorials/extending-a-basic-site.md # docs/en/tutorials/forms.md # docs/en/tutorials/index.md # docs/en/tutorials/site-search.md # main.php # model/SQLQuery.php # security/ChangePasswordForm.php # security/MemberLoginForm.php # tests/control/ControllerTest.php # tests/core/startup/ParameterConfirmationTokenTest.php # tests/model/SQLQueryTest.php # tests/security/SecurityTest.php # tests/view/SSViewerTest.php # view/SSTemplateParser.php # view/SSTemplateParser.php.inc # view/SSViewer.php
2016-01-20 01:16:27 +01:00
}
}
/** ----------------------------------------------------
* "@2x" media query
* ---------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Loading spinner */
.ss-assetuploadfield {
.ss-uploadfield-files {
.ss-uploadfield-item-editform {
&.loading {
background-image: url(../admin/images/spinner@2x.gif);
background-size: 43px 43px;
}
}
}
}
}