Added RTL support for this theme

This commit is contained in:
Elad Shechter
2014-11-23 14:23:37 +02:00
parent 553133a405
commit 24ce3469d9
4 changed files with 222 additions and 0 deletions

View File

@@ -0,0 +1,53 @@
@import "compass/css3";
// Widths
//----------------------------------------------------------------------------------------------------
// Added via JS to <textarea> and class="input-full".
// Applies only to IE7. Other browsers don't need it.
.input_full_wrap {
padding-right:0px; padding-left:8px;
}
// UI Consistency
//----------------------------------------------------------------------------------------------------
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
text-align:right;
}
// Tweaks for Safari + Chrome.
@media (-webkit-min-device-pixel-ratio: 0) {
select[size],
select[multiple],
select[multiple][size] {
padding-right:0px; padding-left:3px;
}
select,
select[size="0"],
select[size="1"] {
// Base64 encoded "../images/select_arrow.gif"
background-position:5px center;
padding-right:0px; padding-left:20px;
}
::-webkit-validation-bubble-message {
background: -webkit-gradient(linear, right top, right bottom, color-stop(0, #666666), color-stop(1, black));
}
}

View File

64
sass/rtl.scss Normal file
View File

@@ -0,0 +1,64 @@
/* load the default Redmine stylesheet */
@import url(../../../stylesheets/rtl.css);
$gray-dark: #202020;
$gray-text: #484848;
$hotpink: #d92e47;
@import "compass";
@import "partials/formalize-rtl";
@import "partials/tables-rtl";
// Header
#header {
padding:14px 17px 0 17px;
> h1 {margin:0 9px 2px 20px;}
> h1:before {margin:0 0 0 29px;}
}
// Search box
#quick-search {
select {padding:5px 5px 5px 15px; margin-left:0px; margin-right:8px;}
input {margin-left:0px; margin-right:4px;}
}
// Menu
#main-menu {
left:auto; right:0;
margin-right: 0; margin-left:0;
}
// Content
#sidebar {
margin-left:0%; margin-right:3%;
}
// Messages
#errorExplanation, div.flash, .nodata, .warning, .conflict {
padding: 2px 30px 3px 4px;
}
// Update issue
#update {
margin-left:0%; margin-right:-40%;
left:auto; right:50%;
@media (min-width: 1000px) {
margin-left:0px; margin-right:-400px;
}
.update-close {
float:left;
margin-right:0px; margin-left: -10px;
}
}
#attachments_fields {
input {
& + input.description,
& + label {
@media (max-width: 700px) {
margin-left:0; margin-right:0;
}
}
}
}

105
stylesheets/rtl.css Normal file
View File

@@ -0,0 +1,105 @@
/* load the default Redmine stylesheet */
@import url(../../../stylesheets/rtl.css);
.input_full_wrap {
padding-right: 0px;
padding-left: 8px;
}
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
text-align: right;
}
@media (-webkit-min-device-pixel-ratio: 0) {
select[size],
select[multiple],
select[multiple][size] {
padding-right: 0px;
padding-left: 3px;
}
select,
select[size="0"],
select[size="1"] {
background-position: 5px center;
padding-right: 0px;
padding-left: 20px;
}
::-webkit-validation-bubble-message {
background: -webkit-gradient(linear, right top, right bottom, color-stop(0, #666666), color-stop(1, black));
}
}
#header {
padding: 14px 17px 0 17px;
}
#header > h1 {
margin: 0 9px 2px 20px;
}
#header > h1:before {
margin: 0 0 0 29px;
}
#quick-search select {
padding: 5px 5px 5px 15px;
margin-left: 0px;
margin-right: 8px;
}
#quick-search input {
margin-left: 0px;
margin-right: 4px;
}
#main-menu {
left: auto;
right: 0;
margin-right: 0;
margin-left: 0;
}
#sidebar {
margin-left: 0%;
margin-right: 3%;
}
#errorExplanation, div.flash, .nodata, .warning, .conflict {
padding: 2px 30px 3px 4px;
}
#update {
margin-left: 0%;
margin-right: -40%;
left: auto;
right: 50%;
}
@media (min-width: 1000px) {
#update {
margin-left: 0px;
margin-right: -400px;
}
}
#update .update-close {
float: left;
margin-right: 0px;
margin-left: -10px;
}
@media (max-width: 700px) {
#attachments_fields input + input.description, #attachments_fields input + label {
margin-left: 0;
margin-right: 0;
}
}