switching to sass

luddement · Oct 8, 2011 · 81ed11b · 81ed11b
1 parent 93124c2
commit 81ed11b
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 46 deletions.
diff --git a/app/assets/stylesheets/rich/application.css b/app/assets/stylesheets/rich/application.css
diff --git a/app/assets/stylesheets/rich/application.css.scss 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;}