RTL fixes for media and color picker.

Props ocean90
see #22453


git-svn-id: https://develop.svn.wordpress.org/trunk@22947 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/css/color-picker-rtl.css

@@ -0,0 +1,27 @@
+.wp-color-result {
+	margin: 0 0 6px 6px;
+	padding-left: 0;
+	padding-right: 30px;
+}
+
+.wp-color-result:after {
+	border-radius: 0 0 1px 1px;
+	border-left: 0;
+	border-right: 1px solid #bbb;
+	left: auto;
+	right: 0;
+}
+
+.wp-color-result:hover {
+	border-color: #aaa;
+}
+
+.wp-color-result:hover:after {
+	border-left: 0;
+	border-right: 1px solid #999;
+}
+
+.wp-picker-container .button {
+	margin-left: 0;
+	margin-right: 6px;
+}

wp-admin/css/color-picker-rtl.min.css

@@ -0,0 +1,27 @@
+.wp-color-result {
+	margin: 0 0 6px 6px;
+	padding-left: 0;
+	padding-right: 30px;
+}
+
+.wp-color-result:after {
+	border-radius: 0 0 1px 1px;
+	border-left: 0;
+	border-right: 1px solid #bbb;
+	left: auto;
+	right: 0;
+}
+
+.wp-color-result:hover {
+	border-color: #aaa;
+}
+
+.wp-color-result:hover:after {
+	border-left: 0;
+	border-right: 1px solid #999;
+}
+
+.wp-picker-container .button {
+	margin-left: 0;
+	margin-right: 6px;
+}

wp-admin/css/color-picker.css

@@ -1,9 +1,11 @@
 .wp-color-picker {
 	width: 80px;
 }
+
 .wp-picker-container .hidden {
 	display: none;
 }
+
 .wp-color-result {
 	background-color: #f9f9f9;
 	border: 1px solid #bbb;
@@ -22,6 +24,7 @@
 	display: inline-block;
 	padding-left: 30px;
 }
+
 .wp-color-result:after {
 	background: #f3f3f3;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
@@ -39,58 +42,64 @@
 	line-height: 22px;
 	padding: 0 6px;
 	position: relative;
-	right: 0px;
+	right: 0;
 	text-align: center;
-	top: 0px;
+	top: 0;
 }
+
 .wp-color-result:hover {
 	border-color: #aaa;
-	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+	-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
-	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
-	-ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-	-o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
 }
+
 .wp-color-result:hover:after {
 	color: #222;
 	border-color: #aaa;
 	border-left: 1px solid #999;
 }
+
 .wp-color-result.wp-picker-open {
 	top: 0;
 }
+
 .wp-color-result.wp-picker-open:after {
 	content: attr( data-current );
 }
+
 .wp-picker-container, .wp-picker-container:active {
 	display: inline-block;
 	outline: 0;
 }
+
 .wp-color-result:focus {
 	border-color: #888;
-	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+	-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
-	-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
-	-o-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
+
 .wp-color-result:focus:after {
 	border-color: #888;
 }
+
 .wp-picker-open + .wp-picker-input-wrap {
 	display: inline-block;
 	vertical-align: top;
 }
+
 .wp-picker-container .button {
 	margin-left: 6px;
 }
+
 .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
 	background-color: #555
 }
+
 .wp-picker-container .iris-picker {
 	border-color: #dfdfdf;
 	margin-top: 6px;
 }
+
 input[type="text"].iris-error {
 	background-color: #ffebe8;
 	border-color: #c00;

wp-includes/css/media-views-rtl.css

@@ -17,7 +17,6 @@
 .media-frame-toolbar > .media-toolbar {
 	left: 0;
 	right: 200px;
-	border-width: 1px 0 0 0;
 }
 
 
@@ -49,11 +48,8 @@
 .media-sidebar {
 	right: auto;
 	left: 0;
-}
+	border-left: 0;
-
+	border-right: 1px solid #dfdfdf;
-.hide-sidebar .media-sidebar {
-	right: auto;
-	left: -300px;
 }
 
 .media-sidebar .setting {
@@ -104,6 +100,14 @@
 	box-shadow: inset 6px 0 6px -6px rgba( 0, 0, 0, 0.2 )
 }
 
+/**
+ * Frame
+ */
+.media-frame .region-content {
+	left: 0;
+	right: 200px;
+}
+
 /**
  * Attachment Browser Filters
  */
@@ -112,19 +116,6 @@
 	margin-left: 10px;
 }
 
-/**
- * Frame
- */
-.media-frame .region-content {
-	left: 300px;
-	right: 200px;
-}
-
-.media-frame.hide-sidebar .region-content {
-	right: 200px;
-	left: 0;
-}
-
 /**
  * Search
  */
@@ -137,7 +128,6 @@
  * Attachments
  */
 .attachments {
-	margin: 0;
 	padding-right: 0;
 	padding-left: 16px;
 }
@@ -149,7 +139,6 @@
 	float: right;
 }
 
-.attachment .icon,
 .attachment .thumbnail {
 	left: auto;
 	right: 0;
@@ -165,13 +154,39 @@
 	left: -7px;
 }
 
+/**
+ * Attachments Browser
+ */
+.attachments-browser .media-toolbar {
+	right: 0;
+	left: 300px;
+}
+
+.attachments-browser .attachments,
+.attachments-browser .uploader-inline {
+	right: 0;
+	left: 300px;
+}
+
+
 /**
  * Progress Bar
  */
 .attachment-preview .media-progress-bar {
 	left: auto;
 	right: 15%;
-	margin: -8px -4px 0 0;
+}
+
+.media-sidebar .media-uploader-status .upload-dismiss-errors {
+	right: auto;
+	left: 0;
+}
+
+.upload-errors .upload-error-label {
+	margin-right: 0;
+	margin-left: 8px;
+	float: right;
+	margin-top: -3px;
 }
 
 /**
@@ -190,6 +205,8 @@
 
 .media-selection .selection-info a {
 	float: right;
+	border-right: 0;
+	border-left: 1px solid #dfdfdf;
 	margin: 1px -8px 1px 8px;
 }
 
@@ -201,7 +218,7 @@
 .media-selection:after {
 	right: auto;
 	left: 0;
-	background-image: -webkit-gradient(linear, left top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
+	background-image: -webkit-gradient(linear, left top, right top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
 	background-image: -webkit-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
 	background-image:    -moz-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
 	background-image:      -o-linear-gradient(left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
@@ -241,10 +258,7 @@
 	margin-left: 10px;
 }
 
-.attachment-info .details {
+.attachment-info .details,
-	float: right;
-}
-
 .attachment-info .compat-meta {
 	float: right;
 }
@@ -271,3 +285,21 @@
 .media-embed .setting {
 	float: right;
 }
+
+/**
+ * Responsive layout
+ */
+@media only screen and (max-width: 900px) {
+	.media-frame .region-content,
+	.media-frame-toolbar > .media-toolbar {
+		left: 0;
+		right: 120px;
+	}
+
+	.attachments-browser .attachments,
+	.attachments-browser .uploader-inline,
+	.attachments-browser .media-toolbar {
+		right: 0;
+		left: 180px;
+	}
+}

wp-includes/script-loader.php

@@ -494,7 +494,7 @@ function wp_default_styles( &$styles ) {
 
 	$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
 
-	$rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views' );
+	$rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views', 'wp-color-picker' );
 	// Any rtl stylesheets that don't have a .min version
 	$no_suffix = array( 'farbtastic' );