From 81ed11bb9ea5f7f4de36764b6aa17c9699845382 Mon Sep 17 00:00:00 2001 From: Bastiaan Terhorst Date: Sat, 8 Oct 2011 18:43:16 +0200 Subject: [PATCH] switching to sass --- app/assets/stylesheets/rich/application.css | 46 ------ .../stylesheets/rich/application.css.scss | 136 ++++++++++++++++++ 2 files changed, 136 insertions(+), 46 deletions(-) delete mode 100644 app/assets/stylesheets/rich/application.css create mode 100644 app/assets/stylesheets/rich/application.css.scss diff --git a/app/assets/stylesheets/rich/application.css b/app/assets/stylesheets/rich/application.css deleted file mode 100644 index 15bede08..00000000 --- a/app/assets/stylesheets/rich/application.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * This is a manifest file that'll automatically include all the stylesheets available in this directory - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at - * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require_self -*/ - -.test { - width: 400px; - height: 400px; - -} - -/* from QQ Uploader */ - -.qq-uploader { position:relative; width: 100%;} - -.qq-upload-button { - display:block; /* or inline-block */ - width: 105px; padding: 7px 0; text-align:center; - background:#880000; border-bottom:1px solid #ddd;color:#fff; -} -.qq-upload-button-hover {background:#cc0000;} -.qq-upload-button-focus {outline:1px dotted black;} - -.qq-upload-drop-area { - position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2; - background:#FF9797; text-align:center; -} -.qq-upload-drop-area span { - display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px; -} -.qq-upload-drop-area-active {background:#FF7171;} - -.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;} -.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;} -.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { - margin-right: 7px; -} - -.qq-upload-file {} -.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;} -.qq-upload-size,.qq-upload-cancel {font-size:11px;} - -.qq-upload-failed-text {display:none;} -.qq-upload-fail .qq-upload-failed-text {display:inline;} \ No newline at end of file diff --git a/app/assets/stylesheets/rich/application.css.scss b/app/assets/stylesheets/rich/application.css.scss new file mode 100644 index 00000000..12bf9ef8 --- /dev/null +++ b/app/assets/stylesheets/rich/application.css.scss @@ -0,0 +1,136 @@ +/* + * This is a manifest file that'll automatically include all the stylesheets available in this directory + * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at + * the top of the compiled file, but it's generally better to create a new file per style scope. + *= require_self +*/ + +// main vars +$activeText: #3bbfce; +$normalText: #3bbfce; +$dimmedText: #3bbfce; + +$subtle: #f3f3f3; +$light: #888888; + + +$imageSize: 100px; +$margin: 20px; +$verticalCenterOffset: 5px; + +$fontSizeSmall: 10px; +$fontSizeNormal: 12px; +$fontSizeLarge: 16px; + +@mixin rounded($radius: 4px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@-webkit-keyframes spinner { + from {-webkit-transform:rotate(0deg);} + to {-webkit-transform:rotate(360deg);} +} + +// the meat + +*, html, body { + font-family: helvetica, arial, sans-serif; + -webkit-font-smoothing: antialiased; +} + +#legacy-form { + display: none; +} + +#images { + list-style: none; + margin: 0; + padding: 0; + + li { + width: $imageSize; + height: $imageSize + $margin; + margin-right: $margin; + float: left; + + :hover { + cursor: pointer; + } + + .placeholder { + height: $imageSize; + border: 1px dotted $light; + @include rounded; + line-height: $imageSize - $verticalCenterOffset; + text-align: center; + + font-size: $fontSizeLarge; + font-weight: bold; + color: $light; + } + + .progress-determinate div { + background: $subtle; + height: $imageSize; + } + + .progress-indeterminate { + background: $subtle; + } + + .progress-indeterminate div { + opacity: 0.48; + margin-left: $imageSize/2 - 24/2; + margin-top: ($imageSize - $verticalCenterOffset)/2 - 24/2; + width: 24px; + height: 24px; + background: url('/assets/rich/spinner.png') no-repeat center; + + -webkit-animation-name: spinner; + -webkit-animation-duration:0.25s; + -webkit-animation-iteration-count:infinite; + -webkit-animation-timing-function:linear; + } + + } + +} + + + + +/* from QQ Uploader */ + +.qq-uploader { position:relative; width: 100%;} + +//.qq-upload-button { +// display:block; /* or inline-block */ +// width: 105px; padding: 7px 0; text-align:center; +// background:#880000; border-bottom:1px solid #ddd;color:#fff; +//} +//.qq-upload-button-hover {background:#cc0000;} +//.qq-upload-button-focus {outline:1px dotted black;} + +.qq-upload-drop-area { + position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2; + background:#FF9797; text-align:center; +} +.qq-upload-drop-area span { + display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px; +} +.qq-upload-drop-area-active {background:#FF7171;} + +.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;} +.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;} +.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { + margin-right: 7px; +} + +.qq-upload-file {} +.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;} +.qq-upload-size,.qq-upload-cancel {font-size:11px;} + +.qq-upload-failed-text {display:none;} +.qq-upload-fail .qq-upload-failed-text {display:inline;} \ No newline at end of file