diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss index c6c9bda01..b78c46056 100644 --- a/scss/AssetUploadField.scss +++ b/scss/AssetUploadField.scss @@ -6,16 +6,16 @@ #AssetUploadField { border-bottom: 0; - @include box-shadow(none); + @include box-shadow(none); } .ss-assetuploadfield { h3 { border-bottom: 1px solid $color-shadow-light; - @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%)); + @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%)); margin: 0 0 8px; - padding: 0 0 7px; - clear: both; + padding: 0 0 7px; + clear: both; } .ss-uploadfield-files { @@ -32,138 +32,138 @@ overflow: hidden; position: relative; } - .ss-uploadfield-item-preview { - position: absolute; + .ss-uploadfield-item-preview { + position: absolute; + height: 30px; + width: 40px; + overflow: hidden; + z-index: 1; + } + .ss-uploadfield-item-info { + position: relative; + height: 30px; + overflow: hidden; + background-color: #5db4df; + @include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%)); + } + .ui-state-error .ss-uploadfield-item-info { + background-color: #c11f1d; + @include background-image(linear-gradient(top, #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%)); + } + .ss-uploadfield-item-name { + position: relative; + z-index: 1; + margin: 3px 0 3px 50px; + width: 40%; + background: #fff; + border: 1px solid lighten($color-medium-separator, 20%); + @include border-radius(5px); + display: block; + line-height: 24px; + height: 22px; + padding: 0 5px; + text-align: left; + + b { + font-weight: bold; + padding: 0 5px 0 0; + } + span { + font-size: $font-base-size - 1; + color: lighten($color-text, 25%); + } + } + .ss-uploadfield-item-status { + float: right; + padding: 0 0 0 5px; + + &.ui-state-error-text { + color: $color-button-destructive; + font-weight: bold; + } + } + .ss-uploadfield-item-actions { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 0; + } + label.ss-ui-button { + background: none; + border: 0; + @include box-shadow(none); + @include text-shadow(none); + color: $color-text-light; + float: right; + + &.ss-uploadfield-item-delete { + // TODO tmp hack until we have permissions and can disable delete + display: none; + } + &.ss-uploadfield-fromfiles { + //@include actionButtonSprite('network-cloud'); + } + &.ss-uploadfield-item-delete { + //color: $color-button-destructive; + //@include actionButtonSprite('minus-circle'); + } + &.ss-uploadfield-item-edit { + padding-top: 0; + padding-bottom: 0; + line-height: 30px; + } + } + .ss-uploadfield-item-progress { + width: 100%; + + div { + @include border-radius(5px); height: 30px; - width: 40px; + padding: 0; + margin: 0; overflow: hidden; - z-index: 1; + width: 100%; } - .ss-uploadfield-item-info { - position: relative; - height: 30px; + .ss-uploadfield-item-progressbar { + background-color: #92a6b3; + @include background-image(linear-gradient(top, #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-cancel { + position: absolute; + top: 7px; + right: 7px; + + button { + display: block; overflow: hidden; - background-color: #5db4df; - @include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%)); + text-indent: -9999px; + padding: 0; + margin: 0; + border: 0; + width: 16px; + height: 16px; + cursor: pointer; + @include single-box-shadow(none); + background: sprite($sprites16, cross-circle) no-repeat; } - .ui-state-error .ss-uploadfield-item-info { - background-color: #c11f1d; - @include background-image(linear-gradient(top, #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%)); + } + + .ss-uploadfield-item-editform { + /* don't use display none, for it will break jQuery('iframe').contents().height() */ + height: 0; + overflow: hidden; + clear: both; + iframe { + width: 100%; } - .ss-uploadfield-item-name { - position: relative; - z-index: 1; - margin: 3px 0 3px 50px; - width: 40%; - background: #fff; - border: 1px solid lighten($color-medium-separator, 20%); - @include border-radius(5px); - display: block; - line-height: 24px; - height: 22px; - padding: 0 5px; - text-align: left; - - b { - font-weight: bold; - padding: 0 5px 0 0; - } - span { - font-size: $font-base-size - 1; - color: lighten($color-text, 25%); - } - } - .ss-uploadfield-item-status { - float: right; - padding: 0 0 0 5px; - - &.ui-state-error-text { - color: $color-button-destructive; - font-weight: bold; - } - } - .ss-uploadfield-item-actions { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 0; - } - label.ss-ui-button { - background: none; - border: 0; - @include box-shadow(none); - @include text-shadow(none); - color: $color-text-light; - float: right; - - &.ss-uploadfield-item-delete { - // TODO tmp hack until we have permissions and can disable delete - display: none; - } - &.ss-uploadfield-fromfiles { - //@include actionButtonSprite('network-cloud'); - } - &.ss-uploadfield-item-delete { - //color: $color-button-destructive; - //@include actionButtonSprite('minus-circle'); - } - &.ss-uploadfield-item-edit { - padding-top: 0; - padding-bottom: 0; - line-height: 30px; - } - } - .ss-uploadfield-item-progress { - width: 100%; - - div { - @include border-radius(5px); - height: 30px; - padding: 0; - margin: 0; - overflow: hidden; - width: 100%; - } - .ss-uploadfield-item-progressbar { - background-color: #92a6b3; - @include background-image(linear-gradient(top, #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-cancel { - position: absolute; - top: 7px; - right: 7px; - - button { - display: block; - overflow: hidden; - text-indent: -9999px; - padding: 0; - margin: 0; - border: 0; - width: 16px; - height: 16px; - cursor: pointer; - @include single-box-shadow(none); - background: sprite($sprites16, cross-circle) no-repeat; - } - } - .ss-uploadfield-item-editform { - /* don't use display none, for it will break jQuery('iframe').contents().height() */ - height: 0; - overflow: hidden; - clear: both; - iframe { - width: 100%; - } - } + } } .ss-uploadfield-addfile { height: 70px; @@ -173,13 +173,13 @@ float: left; margin: 19px 0 0; } - .ss-uploadfield-fromcomputer { - position: relative; - overflow: hidden; - display: block; - margin: 0 10px 0 0; - @include actionButtonSpriteConstructive('drive-upload'); - } + .ss-uploadfield-fromcomputer { + position: relative; + overflow: hidden; + display: block; + margin: 0 10px 0 0; + @include actionButtonSpriteConstructive('drive-upload'); + } .ss-uploadfield-item-uploador { float: left; font-weight: bold; diff --git a/scss/UploadField.scss b/scss/UploadField.scss index 958904bc3..7e43bb226 100644 --- a/scss/UploadField.scss +++ b/scss/UploadField.scss @@ -19,172 +19,172 @@ @include border-radius(4px); @include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef)); } - .ss-uploadfield-item { - margin: 0; - padding: 15px; - overflow: auto; + .ss-uploadfield-item { + margin: 0; + padding: 15px; + overflow: auto; + } + .ss-uploadfield-item-preview { + height: 60px; + line-height: 60px; + width: 80px; + text-align: center; + font-weight: bold; + float: left; + overflow: hidden; + &.ss-uploadfield-dropzone { + @include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset); + border: 2px dashed $color-medium-separator; + background: $color-light-separator; + display: none; } - .ss-uploadfield-item-preview { - height: 60px; - line-height: 60px; - width: 80px; - text-align: center; - font-weight: bold; - float: left; - overflow: hidden; - &.ss-uploadfield-dropzone { - @include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset); - border: 2px dashed $color-medium-separator; - background: $color-light-separator; - display: none; - } - } - .ss-uploadfield-item-info { - margin: 0 0 0 100px; - } - .ss-uploadfield-item-name { - display: block; - line-height: 13px; - height: 26px; - margin: 0; - text-align: left; - - b { - font-weight: bold; - padding: 0 5px 0 0; - } - span { - font-size: $font-base-size - 1; - color: lighten($color-text, 25%); - } - } - .ss-uploadfield-item-status { - float: right; - padding: 0 0 0 5px; - - &.ui-state-error-text { - color: $color-button-destructive; - font-weight: bold; - } - } - label.ss-ui-button { - display: block; - float: left; - margin: 0 10px 0 0; - - &.ss-uploadfield-fromcomputer { - position: relative; - overflow: hidden; - @include actionButtonSprite('drive-upload'); - } - &.ss-uploadfield-fromfiles { - @include actionButtonSprite('network-cloud'); - } - &.ss-uploadfield-startall { - @include actionButtonSprite('navigation'); - } - &.ss-uploadfield-item-delete { - color: $color-button-destructive; - @include actionButtonSprite('minus-circle'); - } - &.ss-uploadfield-item-remove { - @include actionButtonSprite('plug-disconnect-prohibition'); - } - &.ss-uploadfield-item-edit { - @include actionButtonSprite('pencil'); - } - } - .ss-uploadfield-files { - margin: 0; - padding: 0; - max-height: 272px; - overflow: auto; + } + .ss-uploadfield-item-info { + margin: 0 0 0 100px; + } + .ss-uploadfield-item-name { + display: block; + line-height: 13px; + height: 26px; + margin: 0; + text-align: left; + + b { + font-weight: bold; + padding: 0 5px 0 0; + } + span { + font-size: $font-base-size - 1; + color: lighten($color-text, 25%); + } + } + .ss-uploadfield-item-status { + float: right; + padding: 0 0 0 5px; + + &.ui-state-error-text { + color: $color-button-destructive; + font-weight: bold; + } + } + label.ss-ui-button { + display: block; + float: left; + margin: 0 10px 0 0; + + &.ss-uploadfield-fromcomputer { position: relative; + overflow: hidden; + @include actionButtonSprite('drive-upload'); + } + &.ss-uploadfield-fromfiles { + @include actionButtonSprite('network-cloud'); + } + &.ss-uploadfield-startall { + @include actionButtonSprite('navigation'); + } + &.ss-uploadfield-item-delete { + color: $color-button-destructive; + @include actionButtonSprite('minus-circle'); + } + &.ss-uploadfield-item-remove { + @include actionButtonSprite('plug-disconnect-prohibition'); + } + &.ss-uploadfield-item-edit { + @include actionButtonSprite('pencil'); + } + } + .ss-uploadfield-files { + margin: 0; + padding: 0; + max-height: 272px; + overflow: auto; + position: relative; + + .ss-uploadfield-item, + .ss-uploadfield-item.ui-state-error { + border: 0; + border-bottom: 1px solid lighten($color-medium-separator, 20%); + background: none; + color: $color-text; - .ss-uploadfield-item, - .ss-uploadfield-item.ui-state-error { + &:last-child { + border-bottom: 0; + } + } + .ss-uploadfield-item-actions { + height: 28px; + margin: 6px 0 0; + position: relative; + } + .ss-uploadfield-item-progress { + position: absolute; + left: 0; + right: 42px; + width: auto; + margin: 11px 0 0; + height: 15px; + + div { + @include border-radius(25px); + height: 13px; + padding: 0; + margin: 0; + overflow: hidden; + } + } + .ss-uploadfield-item-progressbar { + border: 1px solid $color-medium-separator; + background-color: #92a6b3; + @include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%)); + } + .ss-uploadfield-item-progressbarvalue { + border: 0; + width: 0%; + background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; + } + .ss-uploadfield-item-cancel, + .ss-uploadfield-item-start { + position: absolute; + top: 10px; + right: 0; + + button { + display: block; + overflow: hidden; + text-indent: -9999px; + padding: 0; + margin: 0; border: 0; - border-bottom: 1px solid lighten($color-medium-separator, 20%); - background: none; - color: $color-text; - - &:last-child { - border-bottom: 0; - } - } - .ss-uploadfield-item-actions { - height: 28px; - margin: 6px 0 0; - position: relative; - } - .ss-uploadfield-item-progress { - position: absolute; - left: 0; - right: 42px; - width: auto; - margin: 11px 0 0; - height: 15px; - - div { - @include border-radius(25px); - height: 13px; - padding: 0; - margin: 0; - overflow: hidden; - } - } - .ss-uploadfield-item-progressbar { - border: 1px solid $color-medium-separator; - background-color: #92a6b3; - @include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%)); - } - .ss-uploadfield-item-progressbarvalue { - border: 0; - width: 0%; - background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; - } - .ss-uploadfield-item-cancel, - .ss-uploadfield-item-start { - position: absolute; - top: 10px; - right: 0; - - button { - display: block; - overflow: hidden; - text-indent: -9999px; - padding: 0; - margin: 0; - border: 0; - width: 16px; - height: 16px; - cursor: pointer; - @include single-box-shadow(none); - background: sprite($sprites16, cross-circle) no-repeat; - } - } - .ss-uploadfield-item-start { - right: 20px; - button { - background: sprite($sprites16, navigation) no-repeat; - } - } - .ss-uploadfield-item-editform { - /* don't use display none, for it will break jQuery('iframe').contents().height() */ - height: 0; - overflow: hidden; - clear: both; - margin-top: $grid-vertical; - iframe { - width: 100%; - } - } - } - .ss-uploadfield-addfile { - &.borderTop { - border-top: 1px solid lighten($color-medium-separator, 20%); + width: 16px; + height: 16px; + cursor: pointer; + @include single-box-shadow(none); + background: sprite($sprites16, cross-circle) no-repeat; } } + .ss-uploadfield-item-start { + right: 20px; + button { + background: sprite($sprites16, navigation) no-repeat; + } + } + .ss-uploadfield-item-editform { + /* don't use display none, for it will break jQuery('iframe').contents().height() */ + height: 0; + overflow: hidden; + clear: both; + margin-top: $grid-vertical; + iframe { + width: 100%; + } + } + } + .ss-uploadfield-addfile { + &.borderTop { + border-top: 1px solid lighten($color-medium-separator, 20%); + } + } } body.ss-uploadfield-edit-iframe {